[Question] How are you implementing dark/light mode?

[zaydek]

I’ve seen some different approaches, such as https://logaretm.com/blog/2020-02-08-tailwind-dark-mode but lacks the ability to be programmatically changed via a dark-mode flag to the body element, for example. I’ve also seen https://github.com/danestves/tailwindcss-darkmode/blob/master/index.js which does work with body.dark-mode but is a bit more complex.

What are you doing to implement dark mode?

[lkraav]

https://cdn.vaadin.com/vaadin-lumo-styles/1.6.0/demo/colors.html#dark-palette might be interesting to look at.

[royvanv]

I’ve also seen https://github.com/danestves/tailwindcss-darkmode/blob/master/index.js which does work with body.dark-mode but is a bit more complex.

This would be my preferred method. I provides you with a lot of flexibility.

You can detect the user's preference by using a little JavaScript and update the class on the body/html tag accordingly.

if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
    document.documentElement.classList.add('dark');
}

You can even respond to change in color scheme preference.

[Dorson]

prefers-color-scheme: dark

That works on mobile phones with latest browsers. But only for one color theme.

Recently, I did create the dark mode switch in JS and basic CSS. In my version the multiple color themes can be defined inside of one CSS style file. Multi color theme in one file :-)

Try it on the Github demo page :
https://dorson.github.io/CSS-Dark-Mode-and-color-switch/

Feel free to fork, copy, adopt, etc...

Have fun ! 👍

[emarc]

Since Vaadin was mentioned:
The Vaadin Lumo theme has light and dark variants, implemented as a set of CSS custom properties / variables that can be customised. You can switch between the two variants based on the user settings by setting the “theme” attribute: (https://gist.github.com/emarc/690eb2659c8b51cb895716914d65ec19)

An obvious improvement we’d like to do is to make it possible to do this in pure CSS.
The are two awesome in-depth articles about the topic on web.dev by Thomas Steiner, I really recommend reading these as he explains the do’s and don’ts really well:
https://web.dev/prefers-color-scheme/
https://web.dev/color-scheme/