Skip to content

Commit

Permalink
Fixed Twitter dark mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@JoshyPHP
JoshyPHP committed Apr 22, 2024
1 parent 49d5829 commit ee7caa2
Show file tree
Hide file tree
Showing 2 changed files with 11 additions and 4 deletions.
13 changes: 10 additions & 3 deletions iframe/2/twitter.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,16 @@
((body, hash, window) =>
{
let height,
id = hash.replace(/\D/g, ''),
id = hash.replace(/\D/g, ''),
isDark = /d/.test(hash),
port;
meta = /** @type {!HTMLMetaElement} */ (document.createElement('meta')),
port,
theme = (isDark) ? 'dark' : 'light';

// Required to avoid having a solid white background
// https://drafts.csswg.org/css-color-adjust-1/#color-scheme-prop
meta.name = 'color-scheme';
meta.content = theme;

// Set the page's content in an onload event so that it (and the parent's iframe's onload event)
// can be handled immediately, without waiting for the inner iframe to fully load
Expand All @@ -19,7 +26,7 @@
// NOTE: the link's opaque background blocks the view of the tweet while it's loading, but
// the "resize" event is fired so early in the process (before the tweet has finished
// loading) that we don't really miss anything
body.innerHTML = '<iframe allowfullscreen="" loading="eager" src="//platform.twitter.com/embed/Tweet.html?dnt=true&embedId=x&frame=false&hideCard=false&hideThread=false&id=' + id + '&lang=' + navigator.language.substring(0, 2) + '&theme=' + (isDark ? 'dark' : 'light') + '&widgetsVersion=940dd9ee54270%3A1649359550911&width=550px" scrolling=no></iframe><a href="//twitter.com/user/status/' + id + '" target="_blank" style="align-items:center;background:#' + (isDark ? '15202b' : 'fff') + ';border:solid 1px #' + (isDark ? '222;color:#fff' : 'cdd') + ';border-radius:12px;box-sizing:border-box;display:flex;justify-content:center;padding:1em;top:0"><img alt="&#120143;" src="//abs.twimg.com/favicons/twitter.3.ico"' + (isDark ? '' : ' style="filter:invert(1)"') + ' width="27" height="27" onerror="nextSibling.innerHTML=\'Cannot connect to Twitter. Disable any adblocker and tracking prevention then try again.\'"><span>Loading tweet...</span></a>';
body.innerHTML = '<iframe allowfullscreen="" loading="eager" src="//platform.twitter.com/embed/Tweet.html?dnt=true&embedId=x&frame=false&hideCard=false&hideThread=false&id=' + id + '&lang=' + navigator.language.substring(0, 2) + '&theme=' + theme + '&widgetsVersion=940dd9ee54270%3A1649359550911&width=550px" scrolling=no></iframe><a href="//twitter.com/user/status/' + id + '" target="_blank" style="align-items:center;background:#' + (isDark ? '15202b' : 'fff') + ';border:solid 1px #' + (isDark ? '222;color:#fff' : 'cdd') + ';border-radius:12px;box-sizing:border-box;display:flex;justify-content:center;padding:1em;top:0"><img alt="&#120143;" src="//abs.twimg.com/favicons/twitter.3.ico"' + (isDark ? '' : ' style="filter:invert(1)"') + ' width="27" height="27" onerror="nextSibling.innerHTML=\'Cannot connect to Twitter. Disable any adblocker and tracking prevention then try again.\'"><span>Loading tweet...</span></a>';
};

window.onmessage = (e) =>
Expand Down
2 changes: 1 addition & 1 deletion iframe/2/twitter.min.html
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!DOCTYPE html><title>Content from Twitter</title><link rel=preconnect crossorigin href=//cdn.syndication.twimg.com><link rel=preconnect crossorigin href=//syndication.twitter.com><style>a,body,iframe{border:0;height:100vh;margin:0;width:100%}a,img{position:absolute}img{color:#fff;right:14px;top:11px}</style><body><script>((f,g,h)=>{let d,k=g.replace(/\D/g,''),b=/d/.test(g),c;h.onload=()=>{f.innerHTML='<iframe allowfullscreen loading=eager src="//platform.twitter.com/embed/Tweet.html?dnt=true&embedId=x&frame=false&hideCard=false&hideThread=false&id='+k+'&lang='+navigator.language.substring(0,2)+'&theme='+(b?'dark':'light')+'&widgetsVersion=940dd9ee54270%3A1649359550911&width=550px" scrolling=no></iframe><a href=//twitter.com/user/status/'+k+' target=_blank style="align-items:center;background:#'+(b?'15202b':'fff')+';border:solid 1px #'+(b?'222;color:#fff':'cdd')+';border-radius:12px;box-sizing:border-box;display:flex;justify-content:center;padding:1em;top:0"><img alt=&#120143; src=//abs.twimg.com/favicons/twitter.3.ico'+(b?'':' style=filter:invert(1)')+' width=27 height=27 onerror="nextSibling.innerHTML=\'Cannot connect to Twitter. Disable any adblocker and tracking prevention then try again.\'"><span>Loading tweet...</span></a>'};h.onmessage=a=>{a.stopImmediatePropagation();const e=a.data['twttr.embed'];if(e){a=f.querySelector('a');const l=e.method.substring(14);'resize'===l?(d=e.params[0].height,a?.remove()):'no_results'===l&&(a.lastElementChild.innerHTML='This tweet is unavailable.')}else{if('s9e:init'!==a.data||c)return;c=a.ports[0]}d&&c&&c.postMessage(d)}})(document.body,location.hash,window)</script>
<!DOCTYPE html><title>Content from Twitter</title><link rel=preconnect crossorigin href=//cdn.syndication.twimg.com><link rel=preconnect crossorigin href=//syndication.twitter.com><style>a,body,iframe{border:0;height:100vh;margin:0;width:100%}a,img{position:absolute}img{color:#fff;right:14px;top:11px}</style><body><script>((g,b,h)=>{let e,k=b.replace(/\D/g,''),c=/d/.test(b);b=document.createElement('meta');let d,l=c?'dark':'light';b.name='color-scheme';b.content=l;h.onload=()=>{g.innerHTML='<iframe allowfullscreen loading=eager src="//platform.twitter.com/embed/Tweet.html?dnt=true&embedId=x&frame=false&hideCard=false&hideThread=false&id='+k+'&lang='+navigator.language.substring(0,2)+'&theme='+l+'&widgetsVersion=940dd9ee54270%3A1649359550911&width=550px" scrolling=no></iframe><a href=//twitter.com/user/status/'+k+' target=_blank style="align-items:center;background:#'+(c?'15202b':'fff')+';border:solid 1px #'+(c?'222;color:#fff':'cdd')+';border-radius:12px;box-sizing:border-box;display:flex;justify-content:center;padding:1em;top:0"><img alt=&#120143; src=//abs.twimg.com/favicons/twitter.3.ico'+(c?'':' style=filter:invert(1)')+' width=27 height=27 onerror="nextSibling.innerHTML=\'Cannot connect to Twitter. Disable any adblocker and tracking prevention then try again.\'"><span>Loading tweet...</span></a>'};h.onmessage=a=>{a.stopImmediatePropagation();const f=a.data['twttr.embed'];if(f){a=g.querySelector('a');const m=f.method.substring(14);'resize'===m?(e=f.params[0].height,a?.remove()):'no_results'===m&&(a.lastElementChild.innerHTML='This tweet is unavailable.')}else{if('s9e:init'!==a.data||d)return;d=a.ports[0]}e&&d&&d.postMessage(e)}})(document.body,location.hash,window)</script>

0 comments on commit ee7caa2

Please sign in to comment.