DEV Community

Cover image for Dark Mode in CSS Part-2
Ritvik Dubey
Ritvik Dubey

Posted on

Dark Mode in CSS Part-2

As I got feedback on my blog Dark Mode in CSS that some people don't want to use invert() method. So, here Dark Mode in CSS Part-2 in this also I have wrote about how you can change to dark-mode on toggle without JavaScript.

If you want to apply dark-mode but you don't know JavaScript or you don't want to use invert() or hue-rotate() method then you can also try this. To understand this article better you should have good knowledge about selectors in CSS. You can also check my blog on Sibling Selectors in CSS.

We must remember few points

1) We have to put the checkbox code above the container in the body. Such that container is the next sibling of the checkbox. This will be more clear from code below :-

<body>
    <input type="checkbox"> 
    <div id="container">
    </div>
</body>
Enter fullscreen mode Exit fullscreen mode

2) We have to give the checkbox position equal to absolute.

input[type="checkbox"] {
    position: absolute;
}
Enter fullscreen mode Exit fullscreen mode

3) We will give all those properties we generally give to body to the container such as background.
4) We will give container width equal to the complete width of viewport and height equal to auto. Also we will give it minimum height equal to that of complete viewport.

#container {
    width: 100vw;
    height: auto;
    min-height: 100vh;
}
Enter fullscreen mode Exit fullscreen mode

5) We will Try not to add any other element after closing the container div.
6) We will give the ** * selector** margin and top, left equal to zero.

* {
    top: 0;
    left: 0;
    margin: 0;
}
Enter fullscreen mode Exit fullscreen mode

Let's start desining

First we will design our toggle switch

You can try out this toggle switch or if you want you can try one yourself.

input[type="checkbox"] {
  z-index: 3;
  width: 10vw;
  height: 4vw;
  -webkit-appearance: none;
  position: absolute;
  outline: none;
  border: none;
  cursor: pointer;
  left: 85vw;
  top: 10vh;
  border-radius: 2.5vw;
  background: #0B0E21;
}
input[type="checkbox"]:before {
  content: "";
  position: absolute;
  width: 3vw;
  height: 3vw;
  border-radius: 5vw;
  background: #f4f1de;
  left: .5vw;
  top: .5vw;
  transition: .5s;  
}
input[type="checkbox"]:checked {
  background: #f4f1de;
}
input:checked[type="checkbox"]:before {
  left: 6.5vw;
  background: #0B0E21;
}
Enter fullscreen mode Exit fullscreen mode

Let's design our Light-Mode page

We will add background color to our page and set the colors for our headings and paragraph. Since its our light-mode page we will try to give it a light background color.

#container {
    background: #f4f1de;
}
h1 {
    color: #e07a5f;
}
h3 { 
    color: #3d405b;
}
p {
    color: #7E4D65;
}
Enter fullscreen mode Exit fullscreen mode

There will be no change in colors of our page.

Let's design our Dark-Mode page

In first stage of designing dark-mode page we will add background color to our page by changing background color of container. Since its our dark-mode page we will try to give it a dark background color. We will also couple it with toggle button we have designed, so that when we switch the toggle button the background color will change to the dark on. For this purpose we will use sibling selectors.
To do so we will use next sibling selector (+). We will apply it on toggle. This will be more clear from code below

input[type="checkbox"]:checked ~ #container {
  background: #0B0E21;
}
Enter fullscreen mode Exit fullscreen mode

AS you can see in above example when we toggle only background color changes.

In second stage of designing dark-mode we will change colors of headings and paragraph according to the background color so it will look good. We will also couple these changes with our toggle switch so when we toggle then the colors of headings and paragraph change accordingly for dark-mode.
To do so we will use child selector (>). We will apply it on toggle. This will be more clear from code below

input[type="checkbox"]:checked ~ #container > h1 {
  color: #1F85A0;
}
input[type="checkbox"]:checked ~ #container > h3 {
  color: #C2BFA4;
}
input[type="checkbox"]:checked ~ #container > p {
  color: #7E4D65;
}
Enter fullscreen mode Exit fullscreen mode


Here you can see there is change in the whole page when we toggle.

There are some pros and some cons of using this method over invert() and hue-rotate() method.

Pros

1) We can customize every single element on dark-mode.
2) Colors of image will not be inverted as they were getting inverted in the invert() method.

Cons

1) You have to keep those 6 points in mind.
2) You have to write code for every element in which you want to see the change on toggle.
3) You must have good knowledge of selectors in CSS.

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

Top comments (11)

Collapse
 
ritvikdubey27 profile image
Ritvik Dubey

Thank you Shadow ❤️😇 You wanted the next part so I did it😁😛😛

 
ritvikdubey27 profile image
Ritvik Dubey

I'll try to find the third way to do so😅

Collapse
 
bobbyiliev profile image
Bobby Iliev

Great post! Well done 🙌

We recently added dark mode to the devdojo.com website using TailwindCSS.

Collapse
 
ritvikdubey27 profile image
Ritvik Dubey

Wow😯😍 this looks so settle and beautiful 😍

Collapse
 
itsaditya profile image
Aditya Chaudhary👨‍💻

Great read :)

Collapse
 
ritvikdubey27 profile image
Ritvik Dubey

Thank you brother 😊

Collapse
 
samdev profile image
Sameer

Awesome !!!

Collapse
 
ritvikdubey27 profile image
Ritvik Dubey

Thank you😊

Collapse
 
machwatt profile image
Jöran Kurschatke

Thx for that article. A quick thought: Could be CSS Custom Properties a solution for Con No.2 ? Changing the color-value of a variable should do the work.

Collapse
 
ritvikdubey27 profile image
Ritvik Dubey

Yes it could work but you have to couple it with selectors.

Collapse
 
adnanashraf77 profile image
Adnan Ashraf

Thanx... This is exactly what Iwas looking for.....