Skip to content

Instantly share code, notes, and snippets.

@frontdevops
Last active May 5, 2024 17:54
Show Gist options
  • Save frontdevops/8aea1e0252dd826488dad63319e3ec88 to your computer and use it in GitHub Desktop.
Save frontdevops/8aea1e0252dd826488dad63319e3ec88 to your computer and use it in GitHub Desktop.
Simple Dark Theme Bookmarklet for web pages
javascript:(d=>{var css=`:root{background-color:#fefefe;filter:invert(100%)}*{background-color:inherit}img:not([src*=".svg"]),video{filter: invert(100%)}`,style,id="dark-theme-snippet",ee=d.getElementById(id);if(null!=ee)ee.parentNode.removeChild(ee);else {style = d.createElement('style');style.type="text/css";style.id=id;if(style.styleSheet)style.styleSheet.cssText=css;else style.appendChild(d.createTextNode(css));(d.head||d.querySelector('head')).appendChild(style)}})(document)
javascript:
(d=>{
var css = `
:root{
background-color: #fefefe;
filter: invert(100%)
}
* {
background-color: inherit
}
img:not([src*=".svg"]), video{
filter: invert(100%)
}
`,
style,
id="dark-theme-snippet",
ee = d.getElementById(id);
if (null != ee) ee.parentNode.removeChild(ee);
else {
style = d.createElement('style');
style.type = "text/css";
style.id = id;
if (style.styleSheet) style.styleSheet.cssText = css;
else style.appendChild(d.createTextNode(css));
(d.head||d.querySelector('head')).appendChild(style);
}
})(document)
@lwcorp
Copy link

lwcorp commented Mar 3, 2022

this one is also good: https://sanketmehta7.github.io/DarkMode-JS-BookMark/ and this: https://lnikki.la/articles/night-mode-css-filter/

Cool! The first one indeed doesn't ruin images...but instead hides some text (unlike the code here).
The second one looks almost identical to the code here, i.e. ruins images. The ruined images look a bit more natural than the code here, but still. Yet worse still, it's also irreversible, unlike the code here that can be switched back and forth.

@lwcorp
Copy link

lwcorp commented Dec 17, 2022

I've forked it into a version that does not ruin iframes (like embedded YouTube) and images that use background-image= instead of <img.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment