DEV Community

Cover image for Add Dark Mode to your Websites with CSS

Add Dark Mode to your Websites with CSS

Dom (dcode) on July 14, 2020

It's super easy to include a dark theme for your existing websites using CSS. In this tutorial, we're going to do this by taking advantage of CSS V...
Collapse
 
m4r4v profile image
m4r4v

Simple and clean. Well done!!

Collapse
 
dcodeyt profile image
Dom (dcode)

Thanks 😊

Collapse
 
sephiano1 profile image
Ihaza Omosefe

We can also approach it with SASS

Collapse
 
coderarchive profile image
Lu-Vuong Le 🚀

Nice one! 👏

Collapse
 
dcodeyt profile image
Dom (dcode)

Thanks mate!

Collapse
 
andreabaccolini profile image
Andrea

Very beautifull!
But if I choose the light theme and close the site, the next time I open the site in light mode but the selector is on "auto".

Collapse
 
dcodeyt profile image
Dom (dcode)

That's strange, does it work for other modes?

Collapse
 
andreabaccolini profile image
Andrea

I explain better perhaps you don't understand:
1 I choose the light mode
2 I close the site with the light mode on
3 I reopen the site
3 the select shows me the voice auto instead of light

Thread Thread
 
dcodeyt profile image
Dom (dcode)

I just copied the code directly out of the article and it appears to work fine. Do you have any errors coming up? Or a typo perhaps?

I've also made the code available here:
codepen.io/dcode-software/pen/ZEQMEjG

Thread Thread
 
andreabaccolini profile image
Andrea • Edited

No i havent any error

EDIT now is correct i had a problem with w3 Total Cache

Collapse
 
icidel profile image
del65

I think loading jQuery is overkill to only keep a single value in a cookie or local storage.

I prefer to stay as close to W3C standards as possible : most of the time a commented code snippet can do the job as well, and greatly reduce potential security flaws versus any library.

Collapse
 
rupekeshan profile image
rupekeshan

Nice but this method is not supported by IE

Collapse
 
okikio profile image
Okiki Ojo

But no one will be using IE anymore since Edge Chromium has all of IE's legacy features baked in.

Collapse
 
icidel profile image
del65 • Edited

For IE you could simply have a "theme-dark.css" and "theme-light.css" (and also "theme-print.css" for... Printing) then use server or JavaScript code to include the suitable CSS file on the fly.

Collapse
 
supermario_ai profile image
SuperMario

❤️💯

Collapse
 
tarash1 profile image
Taras

Good solution!

Collapse
 
dcodeyt profile image
Dom (dcode)

Thanks!

Collapse
 
jatinpalande profile image
Jatinpalande

Great one I loved itt 😇😇🥰

Collapse
 
dcodeyt profile image
Dom (dcode)

You're welcome 😊

Collapse
 
andreabaccolini profile image
Andrea • Edited

What if I wanted to do it with icons (or buttons) instead of with a select?

Collapse
 
master___yt profile image
mASTEr.yt

There is an error:
--text-color: var(dark-text-color);
should be
--text-color: var(--dark-text-color);