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 23, 2024
1 parent 49d5829 commit a3a6f5a
Show file tree
Hide file tree
Showing 2 changed files with 17 additions and 8 deletions.
23 changes: 16 additions & 7 deletions iframe/2/twitter.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,24 @@
<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>
<style>a,body,iframe{border:0;border-radius:12px;height:100vh;margin:0;width:100%}a,img{position:absolute}img{color:#fff;right:14px;top:11px}</style>
<body>
<script>
((body, hash, window) =>
((document, 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. The Twitter iframe itself may not set its
// own correctly and may end up with a solid background. It's rounded in CSS to avoid bleeding.
// https://drafts.csswg.org/css-color-adjust-1/#color-scheme-prop
meta.name = 'color-scheme';
meta.content = theme;
document.head.append(meta);

// 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 +28,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>';
document.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') + ';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 All @@ -30,7 +39,7 @@
if (data)
{
// Some extensions such as LastPass add invisible elements to the page
const a = body.querySelector('a'),
const a = document.querySelector('a'),
method = data['method'].substring(14);
if (method === 'resize')
{
Expand All @@ -56,5 +65,5 @@
port.postMessage(height);
}
};
})(document.body, location.hash, window);
})(document, location.hash, window);
</script>
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;border-radius:12px;height:100vh;margin:0;width:100%}a,img{position:absolute}img{color:#fff;right:14px;top:11px}</style><body><script>((c,b,h)=>{let f,k=b.replace(/\D/g,''),d=/d/.test(b);b=c.createElement('meta');let e,l=d?'dark':'light';b.name='color-scheme';b.content=l;c.head.append(b);h.onload=()=>{c.body.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:#'+(d?'15202b':'fff')+';border:solid 1px #'+(d?'222;color:#fff':'cdd')+';box-sizing:border-box;display:flex;justify-content:center;padding:1em;top:0"><img alt=&#120143; src=//abs.twimg.com/favicons/twitter.3.ico'+(d?'':' 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 g=a.data['twttr.embed'];if(g){a=c.querySelector('a');const m=g.method.substring(14);'resize'===m?(f=g.params[0].height,a?.remove()):'no_results'===m&&(a.lastElementChild.innerHTML='This tweet is unavailable.')}else{if('s9e:init'!==a.data||e)return;e=a.ports[0]}f&&e&&e.postMessage(f)}})(document,location.hash,window)</script>

0 comments on commit a3a6f5a

Please sign in to comment.