This is to solve all that above problems with a little modification. Like you suggested, inverting the whole page would also be inverting the images which are not a complete solution. We can apply two steps to make it a nearly silver bullet.
Step #1: invert all elements
html{filter:invert(1)hue-rotate(180deg)}
Step #2: invert-back and restore image color
Invert and rotate the hue color to 180 degrees to revert and restore the image original color with this below.
Loouis, I partially agree with you - this is a great way to solve the inverted images problem. But, there is a whole list of problems to be solved separately when inverting all the pixels, not only images. E. g. if you just invert the colors of the complex UI, there is a great chance it won't look good and you'll need a lot of adjustments. So, yes, nearly silver bullet but only for very simple design.
How’s it going, I'm a Adam, a Full-Stack Engineer, actively searching for work. I'm all about JavaScript. And Frontend but don't let that fool you - I've also got some serious Backend skills.
Location
City of Bath, UK 🇬🇧
Education
10 plus years* active enterprise development experience and a Fine art degree 🎨
If you just use the :not() css selector you don't need the code above. This solves the issue and doesn't waste processor power on converting and unconverting images with the filter tag
I tried to resolve the issue according to both Loouis Low and Daniel Ruiz way. Both are great solutions. But facing problem with the background image. Any workaround, guys?
This is to solve all that above problems with a little modification. Like you suggested, inverting the whole page would also be inverting the images which are not a complete solution. We can apply two steps to make it a nearly silver bullet.
Step #1: invert all elements
Step #2: invert-back and restore image color
Invert and rotate the hue color to 180 degrees to revert and restore the image original color with this below.
Optional compensation for element that is stubborn.
Loouis, I partially agree with you - this is a great way to solve the inverted images problem. But, there is a whole list of problems to be solved separately when inverting all the pixels, not only images. E. g. if you just invert the colors of the complex UI, there is a great chance it won't look good and you'll need a lot of adjustments. So, yes, nearly silver bullet but only for very simple design.
I was going to say that haha. Adjustment required. I should read all the comments first.
If you just use the :not() css selector you don't need the code above. This solves the issue and doesn't waste processor power on converting and unconverting images with the filter tag
.dark-mode :not(img):not(.inverted){ filter: invert(100%) }
I tried to resolve the issue according to both Loouis Low and Daniel Ruiz way. Both are great solutions. But facing problem with the background image. Any workaround, guys?
That
[class="invert"]scared me a little bit. Great solution though.If don't want such cumbersome. Why not using a CSS framework. You can dynamically add dark mode to any element, it's easy. Read this article.