prefers-color-scheme vs light-dark()
Hey all,
I am wondering for those who setup dark modes for their web projects whether they use prefers-color-scheme or light-dark() or a combination of the two. I have been testing out the new light-dark() method, but find I light having the greater control using prefers-color-scheme. Just wondering what other people's experience / feelings are about this.
9 Replies
I've been bitten by "design wants to add a light/dark mode preference" before which light-dark() can't deal with in any way that I know, makes me too nervous to rely on it
have you watched kevin's video on this?
i found great success with similar things before
Don't they do different things?
They behave differently
Light-Dark() allows single colors changes for between modes, prefers-color-scheme is more of a media query and allows you to set any property between modes. In theory you could go anything for light-dark() using prefers-color-scheme, but not vice-versa
I'll try to watch it
you should
If you don't mind the poorer support for
light-dark(), I'd use it.
It has the advantage of it being very easy to lock a theme on a specific part of the site, like if you have an area with a background image and you need the text to always be white, then you just give that area a color-scheme: dark and it locks it in to using the dark values you're provided.If you need to lock it you can just use a scss variable instead of a css variable right? Scss variables work like consts in js.
good point
Hello, they are pretty nice, can be polyfilled with lightningcss / postcss, theme switcher works okay by setting color-scheme: dark / light explicitly, typical switcher with data-theme attribute is easily adapted to this.
Suggest going for a tristate switch with Auto / Dark / Light states so you don't have to do some weird logic when system preferences change.
Also can make such switcher work without JS extremely easily if you are going with the <select> based switcher.
I didn't like how postcss polyfilled it, lightningcss did a better job, but also such polyfilling increases the stylesheet size a bit and may cause accidental problems so look for that.
As kevin said you light-dark has an advantage that it can be changed per part of the layout in css as you want like a regular property, where as prefers-color-scheme is a media query and is mostly static, I find that very useful.
Hope that helps.