loading...
Cover image for Dark Mode with only 1 CSS PROPERTY

Dark Mode with only 1 CSS PROPERTY

dip15739 profile image Dip Vachhani Updated on ・2 min read

Dark mode can be implemented with a single line of code. Let’s see how it's done. 🤔

Consider this template for example 🖥

Now add the magic CSS

html[theme='dark-mode'] {
    filter: invert(1) hue-rotate(180deg);
}

Here is! you are done✌

Dark mode achieved But it's not proper

Explanation

Now let's try and understand what is going on under the hood.

The filter CSS property applies graphical effects like blur or color shift to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders. (Reference: MDN Web Docs)

For this dark mode, we would be using two filters namely invert and hue-rotate

invert filter helps to invert the color scheme of the application. So, black becomes white and white becomes black and similarly for all the colors.invert() function as the value of the filter property will take the number from 0 to 1 or percentages from 0% to 100%

hue-rotate filter helps us with all the other colors that are not black and white. Rotating Hue by 180 degrees, we make sure the color theme of the application does not change but just attenuate the colors of it.

The only catch with this method is, it will also invert all the images, picture and video in your application. So we will add the same rule to all images to reverse the effect.

html[theme='dark-mode'] img,
picture,
video{
    filter: invert(1) hue-rotate(180deg);
}

and we will also add a class to reverse the effect form specific tag.

.invert {
    filter: invert(1) hue-rotate(180deg);
}

Result 🧑‍💻

There we have our Dark mode implemented 🤘
💻 Template from Bulma and Bulma is a free, open source CSS framework based on Flexbox.

Posted on by:

dip15739 profile

Dip Vachhani

@dip15739

I am a full-stack developer(Beginner) with self project experience in Bootstrap JavaScript React Node.js and MongoDB.

Discussion

pic
Editor guide
 

Good read!
Just made a simple function that can be typed in the console to turn any website in dark-mode style using these properties.

function comeToTheDarkside() {
  document.documentElement.style.filter = 'invert(1) hue-rotate(180deg)';
  document.body.querySelectorAll('img, picture, video')
  .forEach(el => el.style.filter = 'invert(1) hue-rotate(180deg)');
}

comeToTheDarkside();
Enter fullscreen mode Exit fullscreen mode
 
html {
        transition: color 300ms, background-color 300ms;
    }

Look more comfortable

 

And as a Bookmarklet function stored in the Bookmarks Bar!

javascript:(function(){document.documentElement.style.filter = 'invert(1) hue-rotate(180deg)';document.body.querySelectorAll('img, picture, video').forEach(el => el.style.filter = 'invert(1) hue-rotate(180deg)');})();
Enter fullscreen mode Exit fullscreen mode

Bookmarklet

 

I see what you're going for, very easy solution to implement. However, that's possibly an unnecessary amount of inline styles. Especially if you have many images and videos. From my experience inline styles can give other devs a headache having to override or strip it out anyway. I would prefer it written out in a stylesheet and modify when necessary. Less bloat that way.

 

use this. github.com/Rabbitzzc/always-helper...

cssString --> inserCss 🤓👍

 

That's cool 🤓👍

 

Thank you. This works fine in Chrome, Edge, and Safari. However the background-color of body is not inverting for me in Firefox 81 on my Mac. Any Firefox folks out there know why and how to fix this? (Other than explicitly setting that color.)

 

We can fixed it using WebKit
-webkit-filter: invert(1)

 

Odd. That is still not working for me. If I put -webkit-filter: invert(1) after filter: invert(1) hue-rotate(180deg) it just alters the color of the text. Before and there is no change. A button inverts but not the page background (the image won't seem to attach). I have background-color: white on body (without that, Chrome didn't work). I'll get there eventually.

 

Wow, useful thing i did not knew, first in a long time. Thanks.

Also works the other way around, to un-dark the site.

 

I was listening to The CSS Podcast over the weekend and they discussed this exact method as a quick way to achieve dark mode.

Would it be realistic to use this method? I would have imagined that there would be quite a bit of nuance if your blacks/whites/greys have a cool or warm tint which don't quite work when inverted.

 

Dark mode applied, nice avatar photo :)
dark mode

 

It's looking nice 😊
but apply this code to it's looking butter 😉

img{
    filter: invert(1) hue-rotate(180deg);
}
 

Haha, yes, I am just making fun here :)
Excellent post! Thank you!

 
 

Oh I like this!
Although with my site it is still a little wonky, but with a quick fix it will be good to go.
thanks for this!.
I also use and love Bulma.

 

Nice one chief.

Anyone used this yet and has infused a button to make it optional for consumers or automatic on the basis of timezone in reference to daytime and nighttime like the twitter app?

 
 
 

It is a nice simple technique but it will only really work well on simple sites with no photographic images.

 

Thanks for this great pro tip!

 

I find this awesome !

 

I am definitely trying this out!

 

Thanks for sharing. Great article :)

 

dark mode on bitmap images = bad idea

the energy saved by dark mode will be spent by by forgetting the colors of the images