DEV Community

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

Adding Dark / Light Theme To The Website Using Only CSS

Bipin Rajbhar
I love to share every thing that i have learned
・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.

Discussion (5)

cbartlett profile image
Colin Bartlett

I found an interesting tool to help with this the other day on ProductHunt:

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.

ameedjamous profile image
Ameed Jamous

I wish all websites and docs had this light bulb :) Good stuff!

adgower profile image
Alex Gower


obasekietinosa profile image
Etinosa Obaseki

🀯🀯🀯 Are there any drawbacks to using this as opposed to more involved solutions?

bipinrajbhar profile image
Bipin Rajbhar Author

maybe or may not πŸ€”

If you have answer let me know in the comment πŸ˜„