Hello everyone π, I hope you are doing great.
So, Today you are going to learn how to Add dark/light theme to your website using only CSS π.
HTML
Let's first set up our HTML.
<input id="toggle-theme" class="toggle-theme" type="checkbox" checked/>
<main >
<label for="toggle-theme" class="toggle-theme-label">
<span>π‘</span>
</label>
<article>
<header>Dark / Light Mode Using Only CSS</header>
<p>...</p>
</article>
</main>
CSS
Now lets set the background-colour
and text colour
of our HTML using CSS variables.
:root {
--bg-color: #edf2f4;
--text-color: #011627;
}
main {
padding: 24px;
background-color: var(--bg-color);
color: var(--text-color);
}
Now, lets set up the checkbox functionality when the checkbox is checked.
/* all the magic happing here β¨*/
input[type="checkbox"]:checked ~ main {
--bg-color: #011627;
--text-color: #edf2f4;
}
That's It π.
Example
π Further Reading:
Thanks for reading! My name is Bipin Rajbhar; I love helping people to learn new skills π. You can follow me on Twitter if youβd like to be notified about new articles and resources.
Top comments (5)
I found an interesting tool to help with this the other day on ProductHunt: nighteye.app/dark-css-generator/
It worked pretty well! Not sure how maintainable it is to have a separate stylesheet. But I was very impressed with the results they created.
I wish all websites and docs had this light bulb :) Good stuff!
Awesome
π€―π€―π€― Are there any drawbacks to using this as opposed to more involved solutions?
maybe or may not π€
If you have answer let me know in the comment π