Here’s a privacy-friendly bookmarklet that toggles dark mode on any page. Click it once to turn dark mode on, and click it again to turn it off.
Why? I’m super paranoid when it comes to browser extensions and never install them. There are a couple that promise darkmode for who knows what in return. While most popular sites have darkmode, a few useful ones don’t, such as Schneier On Security, Gmail and others.
This is just a single line of javascript that you can inspect word for word. Click the bookmark to turn light to dark and dark to light.
javascript:(()=>{const id='dm-bookmarklet';const old=document.getElementById(id);if(old){old.remove();return}const s=document.createElement('style');s.id=id;s.textContent='html{filter:invert(1) hue-rotate(180deg)!important;background:#fff!important}img,video,picture,canvas,iframe,embed,object,[style*="background-image"]{filter:invert(1) hue-rotate(180deg)!important}';document.documentElement.appendChild(s)})();
To install it:
- Show your bookmarks bar (Ctrl/Cmd + Shift + B in Chrome).
- Right-click the bar and choose Add page… (or Add bookmark).
- Name it something like “Dark mode”, paste the code above into the URL field, and save.
- On any website, click the bookmark to toggle dark mode.
How it works: It inverts the colours of the whole page and then rotates the hue 180° so that colours like blue links stay roughly the same shade. Images, videos and embeds are inverted a second time so they look normal again.
Limitations:
- There might be sites with strict security policies where it won’t work. But I tested on Facebook, Github and Gmail. Of these Gmail is the one I would use it on, since the other do have darkmode.
- Background images: background images set in CSS files, rather than inline on the element, may still appear inverted.
- Sites that are already dark: running it on a page that’s already dark will turn the page light.
- It does not work well on Google Docs