loading...
Cover image for Dark Mode in CSS (toggle)

Dark Mode in CSS (toggle)

ritvikdubey27 profile image Ritvik Dubey ・Updated on ・4 min read

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>
Enter fullscreen mode Exit fullscreen mode
main {
    background: #fff;
}
Enter fullscreen mode Exit fullscreen mode


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

Apply invert() in above example

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


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>
Enter fullscreen mode Exit fullscreen mode
main {
    background: #fff;
}
h1 {
   color: #000;
}
Enter fullscreen mode Exit fullscreen mode


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>
Enter fullscreen mode Exit fullscreen mode
main {
    background: #fff;
    filter: invert(1);
}
h1 {
   color: #000;
}
Enter fullscreen mode Exit fullscreen mode


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>
Enter fullscreen mode Exit fullscreen mode
main {
    background: #fff;
}
h1 {
   color: red;
}
Enter fullscreen mode Exit fullscreen mode


Here we have given red color to h1.

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

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


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>
Enter fullscreen mode Exit fullscreen mode
main {
    background: #000;
}
Enter fullscreen mode Exit fullscreen mode


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>
Enter fullscreen mode Exit fullscreen mode
main {
    background: #000;
    filter: invert(1);
}
Enter fullscreen mode Exit fullscreen mode


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>
Enter fullscreen mode Exit fullscreen mode
main {
    background: #000;
    filter: invert(1);
}
img {
    filter: invert(1);
}
Enter fullscreen mode Exit fullscreen mode


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

<input type="checkbox" />
<main>
    <h1></h1>
    <img src="" >
</main>
Enter fullscreen mode Exit fullscreen mode
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);
}
Enter fullscreen mode Exit fullscreen mode

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

Discussion

pic
Editor guide
Collapse
curlmuhi profile image
Ekta Maurya

Amazing articleπŸ‘ŒπŸ’―
And your "I'm broken" Pen was amazing😍🀩

Collapse
ritvikdubey27 profile image
Ritvik Dubey Author

Thank you so much EktaπŸ˜‡β€οΈ

Collapse
sendy profile image
Sandeep

I used invert but only to invert logos etc whenever there was dark background behind. But never thought about trying Theming using Invert.

Amazing. Thanks for sharing :)

Collapse
ritvikdubey27 profile image
Ritvik Dubey Author

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

Collapse
zhiyueyi profile image
Zhiyue Yi

This is so nice!! Thank you!!

Collapse
ritvikdubey27 profile image
Ritvik Dubey Author

Thank you for reading. Hope you found it helpfulπŸ˜‡

Collapse
braydentw profile image
Brayden W

Great article! Do you have any ideas on how to implement with TailwindCSS classes?

Collapse
ritvikdubey27 profile image
Ritvik Dubey Author

Thank you πŸ˜‡ sorry no idea, I haven't tried Tailwind CSS yet😐 But I think if there is a way you can customize it then you can do it.

Collapse
braydentw profile image
Brayden W

Good to know. Thanks again :D

Collapse
ozakaran profile image
πŸ†– Karan Oza

Great article Ritvik...
Keep going

Collapse
ritvikdubey27 profile image
Ritvik Dubey Author

Thank you so much brotherπŸ˜‡

Collapse
andrewbaisden profile image
Andrew Baisden

Wow nice very cool.

Collapse
ritvikdubey27 profile image
Ritvik Dubey Author

Thank you πŸ˜‡

Collapse
abdieldev profile image
Abdiel Ortega

Great work!

Collapse
ritvikdubey27 profile image
Ritvik Dubey Author

Thank you πŸ˜‡

Collapse
trap_introvert profile image
Collapse
ritvikdubey27 profile image
Ritvik Dubey Author

Thanks πŸ™ŒπŸ˜€

Collapse
rrz profile image
Rafael Ramos

Simple and well explained, really nice article, Thanks!

Collapse
ritvikdubey27 profile image
Ritvik Dubey Author

Thank you so much πŸ˜‡

Collapse
shadowscientist profile image
Shadow Scientist

Very clever approach, Ritvik. πŸ€œπŸ€›
Next series is going to be awesome. πŸ˜‰

Collapse
ritvikdubey27 profile image
Ritvik Dubey Author

Thank you so much ShadowπŸ˜‡β€οΈ. Yeah for sure next series will be awesomeπŸ™ŒπŸ€©

Collapse
ljcdev profile image
ljc-dev

Very interesting post πŸ˜€, never heard of invert before, saving it for it later πŸ‘Œ.

Collapse
ritvikdubey27 profile image
Ritvik Dubey Author

Thank you so much JCπŸ˜‡ yeah invert helps a lot.!!

Collapse
suweya profile image
weiyang.su

very interesting

Collapse
ritvikdubey27 profile image
Ritvik Dubey Author

Thank you πŸ™ŒπŸ˜€

Collapse
tomavelev profile image
Toma

Very cool and optimal. It's still in a W3C draft but, implementers are faster than standardizers. The list of features will expand: drafts.fxtf.org/filter-effects/#fu...

Collapse
ritvikdubey27 profile image
Ritvik Dubey Author

Okay I'll check itπŸ™ŒπŸ˜€
Thank you 😊

Collapse
parascode007 profile image
Paras-code-007

Nice!!
That would help me a lot in future projects

Collapse
ozobianwadibia profile image
Ozobia Nwadibia

Does the new theme persist after you refresh the page? I couldn't try this as I was viewing your work on a mobile device.

Collapse
king11 profile image
Lakshya Singh

Amazing article 🎊

Collapse
ritvikdubey27 profile image
Ritvik Dubey Author

Thank YouπŸ˜‡

Collapse
lanrewaju profile image
Lanre Fagbeyiro

Incredible!!!

Collapse
smartseotools profile image
Smart SEO Tools

Good job, thanks bro.