DEV Community

How to achieve dark/light mode with CSS.

Uduakabaci Udofe on December 08, 2021

If you have ever written CSS for a large web app then you know how hard it is to manage CSS. Add that to the increasing need to support dark and li...
Collapse
 
nielskersic profile image
Niels Kersic

If you only have a few themed variables, it's okay to store them in a single CSS file like main.css. If your light and dark themes are more elaborate, I would recommend splitting them into separate files.
You mention that you don't like this approach because of slow connections and high latency, but in cases where the user's connection or device is slow, it's better to only send them the theme they need, instead of both themes.

Collapse
 
uduakabaci profile image
Uduakabaci Udofe

All these are valid arguments, but this is what works for me. I love having the primaries in one file as it makes maintenance very easy for me. I've never needed to split my variables into separate files, so splitting seems a bit overkill, but I understand what you are getting at.
Thanks for pointing this out.

Collapse
 
joeattardi profile image
Joe Attardi

You can also use the prefers-color-scheme media query and automatically set the theme based on the OS settings!

Collapse
 
uduakabaci profile image
Uduakabaci Udofe

Thanks for pointing this out. I'm not sure why i left it out but you achieve that with this snippet.
document.addEventListener("DOMContentLoaded", () => {
const theme = document.querySelector(".theme");
const button = document.querySelector(".theme-switcher");
const mode = document.querySelector(".theme-switcher__current-mode");
button.addEventListener("click", () => toggleTheme(mode.innerText == "dark"));

const darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
// check for browser support
if (darkModeMediaQuery) {
darkModeMediaQuery.addListener((e) => {
const darkModeOn = e.matches;
toggleTheme(darkModeOn);
});
}

function toggleTheme(isDarkTheme) {
theme.classList.remove("theme_dark", "themelight");
if (isDarkTheme) {
theme.classList.add("theme
dark");
mode.innerText = "light";
} else {
theme.classList.add("theme
_light");
mode.innerText = "dark";
}
}
});

Collapse
 
ksengine profile image
Kavindu Santhusa
Collapse
 
zakarialaoui10 profile image
ZAKARIA ELALAOUI

images love your comment hhh

Collapse
 
serhiityshchenko profile image
Serhii Tyshchenko

If you're following BEM methodology you should use -- for modifiers, ex theme--light

Collapse
 
uduakabaci profile image
Uduakabaci Udofe

haha. Thanks for pointing that out. theme--light is the correct thing to do.

Collapse
 
bhardwajzone profile image
Shubham Bhardwaj
Collapse
 
ksengine profile image
Kavindu Santhusa • Edited

This method converts links from blue to yellow.
Take a look at this solution.
dev.to/ksengine/comment/1kclh

Collapse
 
ekimcem profile image
Ekim Cem Ülger

Thank you so much !

Collapse
 
uduakabaci profile image
Uduakabaci Udofe

i'm glad you like it.

Collapse
 
oviecodes profile image
Godwin Alexander

Nice post bro

Collapse
 
uduakabaci profile image
Uduakabaci Udofe

Thanks, man.