Dark Mode in One Line of Code!
Dark mode has seemingly become the desired visual mode for websites and mobile apps alike. Dark mode is easier on the eyes, especially for those like me who like to burn the midnight oil by coding and reading tutorials. Unfortunately not all websites offer dark mode, so it's up to me to remedy the situation.
Though it's not a true "dark mode", you can use CSS' filter to create dark mode of your own:
html {
filter: invert(1);
}
Inverting colors completely via 1 will make that light-themed website much more comfortable on your eyes. It's important to realize that developers shouldn't consider this a long-term solution, as it's a quite lazy remedy and doesn't lend well to branding.
![From Webcam to Animated GIF: the Secret Behind chat.meatspac.es!]()
My team mate Edna Piranha is not only an awesome hacker; she's also a fantastic philosopher! Communication and online interactions is a subject that has kept her mind busy for a long time, and it has also resulted in a bunch of interesting experimental projects...
![Write Better JavaScript with Promises]()
You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...
![QuickBoxes for Dojo]()
Adding to my mental portfolio is important to me. First came MooTools, then jQuery, and now Dojo. I speak often with Peter Higgins of Dojo fame and decided it was time to step into his world. I chose a simple but useful plugin...
![Custom Scrollbars in WebKit]()
Before each of the browser vendors we like was providing unique CSS controls, Internet Explorer was setting the tone. One such example is IE's early implementation of CSS filters. Internet Explorer was also the first browser that allowed developers to, for better or worse, customize...
Nice trick !
I would add exactly the same on all images with
img { filter: invert(1); }Then you are even closer to a dark mode ;)
oh god no
I just tried it here and it worked, Thanks for the info.
here is the code I used:
document.querySelector('html').style.filter = 'invert(1)'I love filter for this! You can also make the inversion less harsh by adding to the filter list:
/* Use hue-rotate for optional color adjustment */ html { filter: invert(1) contrast(0.95) saturate(0.5) hue-rotate(180deg);Never EVER use this trick other than for a quick preview.
CSS filters on large areas are really bad for scrolling performance.
This isn’t quite dark mode. This is just an invert which makes images look like crap. Still, neat trick.
Thanks