Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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)
@brongulus
Copy link

brongulus commented Oct 21, 2020

Hi, I wanted to use this bookmarklet in the nyxt browser but it seems that it requires a licensed version, would you be kind enough to provide us with one?
Relevant PR discussion: atlas-engineer/nyxt#1010
Thanks a lot!

@frontdevops
Copy link
Author

frontdevops commented Oct 21, 2020

Hi!
No problem, use at your own discretion, I will only be glad. Free license - take whoever you want, do what you want

@luetage
Copy link

luetage commented Jul 12, 2021

Thanks, that’s a really helpful bookmarklet, far easier to use than all the dark theme extensions. I’m using it on Vivaldi browser as a command chain to trigger it with shortcut. The only change I made was introducing a line to show the original URL in the address field after execution: setTimeout(()=>{const t=window.location.href;window.history.replaceState("stateObj","",t)},300);

@proudparrot2
Copy link

proudparrot2 commented Dec 1, 2021

Problem - when I try it, say on this page, it inverts all colors not just background. Is there a way to fix it?

@ttodua
Copy link

ttodua commented Feb 27, 2022

@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 of 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. But it's also irreversible, unlike the code here that can be switched back and forth.

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