Cover image for Adding Dark / Light Theme To The Website Using Only CSS

Adding Dark / Light Theme To The Website Using Only CSS

bipinrajbhar profile image Bipin Rajbhar Updated on ・1 min read

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 😎.


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">
  <header>Dark / Light Mode Using Only CSS</header>


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 😎.


📚 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.

Posted on Apr 25 by:

bipinrajbhar profile

Bipin Rajbhar


I love to share every thing that i have learned


markdown guide

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!


🤯🤯🤯 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 😄