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.