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>
2) We have to give the checkbox position equal to absolute.
input[type="checkbox"] {
position: absolute;
}
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;
}
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;
}
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;
}
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;
}
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;
}
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;
}
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.
Top comments (11)
Thank you Shadow ❤️😇 You wanted the next part so I did it😁😛😛
I'll try to find the third way to do so😅
Great post! Well done 🙌
We recently added dark mode to the devdojo.com website using TailwindCSS.
Wow😯😍 this looks so settle and beautiful 😍
Great read :)
Thank you brother 😊
Awesome !!!
Thank you😊
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.
Yes it could work but you have to couple it with selectors.
Thanx... This is exactly what Iwas looking for.....