Dark Mode in CSS (toggle)

Featured on Hashnode
Featured on daily.dev

Subscribe to my newsletter and never miss my upcoming articles

Hey all this article is about Dark mode and light mode toggle switch in CSS, we will discuss dark mode implementation in CSS in detail. Yes you can make a dark mode toggle switch with CSS only without JavaScript and that too with few lines of code.

This can be achieved using 2 CSS properties

invert()

The invert() function is used with filter property to invert the color samples. The invert() function requires an argument to be passed to it. This argument determines the proportion of the conversion applied. This argument can be either a percentage value or a number.

hue-rotate()

The hue-rotate function is also used with filter property to rotate the hue of an element and its contents. An hue-rotation is where you specify an angle around the color circle that the hue of element and its component will be adjusted by. This take arguments in angle. Color wheel

Let's understand it better with examples

Basic element

<main>
</main>
main {
    background: #fff;
}

Haha, you might have not found anything in above pen, actually its blank only have white background.

Apply invert() in above example

<main>
</main>
main {
    background: #fff;
    filter: invert(1);
}

Now you can see in this example that we have applied invert() function, so here the background color changed to black but we have given white color to background property. So here invert() function plays its role and inverted white into black.

Let's add some content in it.

<main>
    <h1></h1>
</main>
main {
    background: #fff;
}
h1 {
   color: #000;
}

Here in above example we have added some content i.e., h1 in the main element.

Apply invert() in above example

<main>
    <h1></h1>
</main>
main {
    background: #fff;
    filter: invert(1);
}
h1 {
   color: #000;
}

Here in above example we have applied invert() function to main and we set the color of h1 to black but as we have applied invert() function it also got changed into black from white along with background but background color changed into black because it was specified as white.

Let's give some other color to h1

<main>
    <h1></h1>
</main>
main {
    background: #fff;
}
h1 {
   color: red;
}

Here we have given red color to h1.

Apply hue-rotate() along with invert() to above example

<main>
    <h1></h1>
</main>
main {
    background: #fff;
    filter: invert(1) hue-rotate(180deg);
}
h1 {
   color: red;
}

Here we have applied hue-rotate() function along with taking help from color-wheel. Now you can see its color changed to pink from red.

Let's add an image instead of h1

<main>
    <img src="" >
</main>
main {
    background: #000;
}

Here we have added an image whose color is white so we have changed background of main to black.

Apply invert() to above example

<main>
    <img src="" >
</main>
main {
    background: #000;
    filter: invert(1);
}

Here you can see that as we applied invert to the main element the color of the background changed to white from black but the color of our image also changed to black from white.

Apply invert() to keep the color of image same

<main>
    <img src="" >
</main>
main {
    background: #000;
    filter: invert(1);
}
img {
    filter: invert(1);
}

Here as we have applied invert() function to our image along with main so you can see that *color of our image remained same.

Let's combine all the properties we have learnt so far

On applying all these properties in appropriate manner with the toggle switch with the help of sibling selectors we can have a dark mode toggle with CSS only. To understand it better I suggest you to go through the code of pen below. And if you want to read more about sibling selectors then you can read my blog on sibling selectors [here]ritvikdubeyblog.hashnode.dev/sibling-select..)

<input type="checkbox" />
<main>
    <h1></h1>
    <img src="" >
</main>
main {
    background: #000;
}
h1 {
    color: #fca311;
}
img {
   //other properties here
}
input[type="checkbox"]:checked ~ main {
  filter: invert(1) hue-rotate(180deg);
}
input[type="checkbox"]:checked ~ main > img {
  filter: invert(1);
}

Here is one of my pen, here I have done something interesting with properties explained above.

Edited -----------------------------------------------------

For those who like to use custom method here is a the other way by which you can make a custom dark-mode without JavaScript. Dark-Mode in CSS Part-2.

Thank you for reading this I hope you found it helpful.

Please feel free to share your views about it.

I hope you liked it and found it helpful.

Connect with me on Twitter or LinkedIn

Nimrod Kramer's photo

Congratulations on earning the daily.dev badge! Good job Ritvik Dubey πŸš€

Only one post a day gets this badge :) daily.dev/posts/announcing-an-exclusive-dai..

Ritvik Dubey's photo

Thank You so muchπŸ˜‡

Ahmadullah Nikzad's photo

Thank so much it was so helpful for I was searching for how to toggle between darg mode and light in css.

Ritvik Dubey's photo

Oh that's great 🀩 I'm glad you found it helpful 😊

Vipin Chandra's photo

GREAT article man !!

Ritvik Dubey's photo

Thank you so much brotherπŸ˜‡

Wahiduzzaman Hridoy's photo

This is so awesome and concise! Thanks for sharing!

Ritvik Dubey's photo

Thank you for your feedback buddy πŸ™ŒπŸ˜Š

Instinct's photo

Nice Article!

This works great with input fields but not so great when applied to the body as a whole. This is because all the elements inside the body are also given a different colour (the inverted one).

But I will use this property for quick dark theme settings.

Ritvik Dubey's photo

Thank you. You can try invert for all other elements when you apply it to body, in the same way I applied to image in the last one. But that maybe very hectic.

AMRIK SINGH KHALSA's photo

Nice Work Bro! Keep Rocking!

Ritvik Dubey's photo

Thank you so much sir.πŸ˜‡

Braydon Coyer's photo

Great job, Ritvik! Thanks for sharing!

Ritvik Dubey's photo

Thank you πŸ˜‡ I'm glad you found it helpful 😊

Mohit Vishwakarma's photo

Really appreciatable

Ritvik Dubey's photo

Thank you brother 😊❀️