DEV Community

Discussion on: Add dark mode to your website with just a few lines of code

Collapse
 
patryktech profile image
Patryk

According to CanIUse.com [prefers-color-scheme] support is at around 78%, leaving out Internet Explorer and Edge (not Edge Chromium).

Correct me if I'm wrong, but I don't believe browser support is enough for this feature to work properly - you also need a way to set your theme preferences in your OS. I think this is only available on Android Q (Android 10), and I am yet to find a way to set this as a preference in KDE. (No clue about OSX, Windows, and iOS, as I don't use them and had no need to research it so far).

I think it's a bit too early to adopt this, as most users will have older phones.

Collapse
 
pavi2410 profile image
Pavitra Golchha

You can always fallback to light theme in case this feature is not supported.

Collapse
 
patryktech profile image
Patryk

Of course. Better yet, do use a toggle, and don't rely on something unreliable :)

Thread Thread
 
naismith profile image
Chris Naismith

Using both is the preferred option. Support in OS/Browsers for prefers-color-scheme will only increase. Which means if you implement now, you will support more users in the future, rather than doing it later.

Secondly, in initial hit of your site, you can set their preferred theme according to their preferred color schema (dark mode on first hit). If you only rely on a toggle, you force users to use the light mode regardless of their preferred setting.

Thread Thread
 
albertomontalesi profile image
AlbertoM

Correct, combining both is the best idea.

Thread Thread
 
patryktech profile image
Patryk

Admittedly, I should have worded this better, as that is what I do. Check for a LocalStorage preference that I set when the user toggles dark mode, and check the schema if the key isn't set.