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.
![CSS vs. JS Animation: Which is Faster?]()
How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps?
This article serves as a point-by-point...
![Convert XML to JSON with JavaScript]()
If you follow me on Twitter, you know that I've been working on a super top secret mobile application using Appcelerator Titanium. The experience has been great: using JavaScript to create easy to write, easy to test, native mobile apps has been fun. My...
![Chris Coyier’s Favorite CodePen Demos II]()
Hey everyone! Before we get started, I just want to say it's damn hard to pick this few favorites on CodePen. Not because, as a co-founder of CodePen, I feel like a dad picking which kid he likes best (RUDE). But because there is just so...
![Retrieve Google Analytics Visits and PageViews with PHP]()
Google Analytics is an outstanding website analytics tool that gives you way more information about your website than you probably need. Better to get more than you want than not enough, right? Anyways I check my website statistics more often than I should and...
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