What are some ways of implementing a togglable “dark mode” on a website?

I’m curious on the ways of implementing color schemes that can be toggled on the fly on a website, something like the youtube/twitter dark modes:

$" \" \\" \\\"Youtube dark mode\\\"\\"\""$

Easiest way would be to separate the color styles into a new stylesheet and apply a toggle class over the body.

Are there any other, better ways of doing it? perhaps using CSS variables?

Modern option:

Use CSS variables and toggle them with JS, it would be the easiest option. Not all browsers support CSS variables.

Another option:

Just make a class (or attribute) to apply on body and override styles in any element within that body you want to change. In JS you just toggle that one class/attribute on body.

body[theme="dark"] {
  background: #000;
  color: #fff;
}

body[theme="dark"] nav {
  ...
}

body[theme="dark"] footer {
  ...
}

From the architecture point of view I would recommend creating a separate themes CSS/SASS/whatever folder and put there everything in the original structure, something like:

core.css
variables.css
components/nav.css
components/footer.css
themes/dark/core.css (override and change variable names where needed)
themes/dark/variables.css
themes/dark/components/nav.css (only override main nav.css)
themes/dark/components/footer.css (only override)

and at the end you might have main.css and main-dark.css

P.S. you may also use currentColor to save you some CSS. Basically you should change main styles on html/body and that should be enough for most simple cases if you just want to invert colors.

Here a link on how to use custom properties (CSS variables) for theming.

I do this with staticresource.com/basic.css by setting <html data-theme=dark>…so I go this method exactly :D codepen.io/tomhodgins/pen/RaMYxg

I usually architecture theming into the CSS from the beginning, by just following Harry's BEMIT guide.

I assign a "root" theme class to the body element, like t--light
Then, every element with a theme (even if only one theme is planned) will get a t- (theme) CSS class. For example t-menu__item--active
To make it work, I prefix the CSS selectors with the root theme class. If I want to add a new theme, all I have to do is copy all theme related CSS classes, change the prefixed CSS theme class and do the actual theming
Switching the theme is as easy as removing and adding a CSS class in the body tag (either on the server or the client side).

>>> Full example

+1 Definitely the right way to do it.

That's how I would do it

Have a CSS class that would add styles to make website dark
Toggle the class with JavaScript (on user action)

Not really sure on how I would approach it, but here's an interesting talk by Harry Roberts which might help. 🙂

https://www.youtube.com/watch?v=oy1IUEwosL0

Thread

What are some ways of implementing a togglable “dark mode” on a website?

Responses(6)

Modern option:

Another option:

Recent threads

Search Hashnode

What are some ways of implementing a togglable “dark mode” on a website?

Responses(6)

Modern option:

Another option:

Recent threads