{"id":1716,"date":"2024-04-18T17:43:30","date_gmt":"2024-04-18T23:43:30","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=1716"},"modified":"2024-04-18T17:43:31","modified_gmt":"2024-04-18T23:43:31","slug":"dark-and-light","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/dark-and-light\/","title":{"rendered":"What’s Going On in Dark Theme \/ Light Theme Land"},"content":{"rendered":"\n

There has been a fresh round of enthusiasm and writing around light mode \/ dark mode support for the web lately. I think it’s driven partially by the new light-dark()<\/code> function<\/a> in CSS (CSS Color Module Level 5 spec<\/a>) that makes it easier to declare values that change depending on the mode. Here’s the basic usage:<\/p>\n\n\n

html<\/span> {\n  color-scheme<\/span>: light dark;\n\n  background<\/span>: light-dark<\/span>(white, black);\n  color<\/span>: light-dark<\/span>(black, white);\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
\n
\n
You used to have to do this:<\/p>\n\n\n
:root<\/span> {\n  color-scheme<\/span>: light dark;\n\n  --dark-color<\/span>: #292524<\/span>;\n  --light-color<\/span>: #f5f5f4<\/span>;\n\n  --text-color<\/span>: var<\/span>(--dark-color);\n  --bg-color<\/span>: var<\/span>(--light-color);\n}\n\n@media<\/span> (prefers-color-scheme:<\/span> dark) {\n  :root<\/span> {\n    --text-color<\/span>: var<\/span>(--light-color);\n    --bg-color<\/span>: var<\/span>(--dark-color);\n  }\n}\n\nbody<\/span> {\n  color<\/span>: var<\/span>(--text-color);\n  background-color<\/span>: var<\/span>(--bg-color);\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre><\/div>\n\n\n\n
\n
And now you can do this:<\/p>\n\n\n
:root<\/span> {\n  color-scheme<\/span>: light dark;\n\n  --light<\/span>: #292524<\/span>;\n  --dark<\/span>: #f5f5f4<\/span>;\n}\n\nbody<\/span> {\n  color<\/span>: light-dark<\/span>(var(--light), var<\/span>(--dark));\n  background-color<\/span>: light-dark<\/span>(var(--dark), var<\/span>(--light));\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre><\/div>\n<\/div>\n\n\n\n
Essentially, it prevents you from having to use the @media<\/code> query and re-declare variables. I like it. I think it makes code like this more readable and succinct \u2014 pending variable naming and usage of course. <\/p>\n\n\n\n
If you’re going to want to offer more themes than just light and dark, well, you’re out of luck here, you’ll need to implement something else, likely based on changing classes on the <html><\/code> element and updating variables when the class matches. <\/p>\n\n\n
html<\/span>.nickleoden-theme<\/span> {\n  --bg-color<\/span>: purple;\n  --text-color<\/span>: green;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
I could imagine a more composable toggle method in the future, but this is what we have for now. <\/p>\n\n\n\n
\n\n\n\n
When I first saw light-dark()<\/code>, I liked the basic idea, but I figured as soon as you offer your own user toggle for mode, you’d be out of luck. After all, you can’t change what the prefers-color-scheme<\/code> media query returns, and thus which of the two values light-dark()<\/code> will pick. But it turns out you can! The trick lies in that color-scheme<\/code> property. You’ll see recommendations that you use color-scheme: light dark;<\/code>. If you only set one or the other, you’re forcing light-dark()<\/code> to pick the relevant side.<\/p>\n\n\n\n
So then your user toggle could force one or the other values on the document if it’s set. (If it’s not set, leave it alone!). Here’s that working:<\/p>\n\n\n\n
Here’s what it’s good for: designing a site that responds to the operating system level setting for light mode \/ dark mode. And you have to be good with the level of browser support<\/a> (no Safari just yet, as I write, but it’s in preview). If you are wondering what the fallback is, it’s doing things the old way (see above), and if you’re going to write that you might as well leave it at that.<\/p>\n\n\n\n
In real life, you’d probably be using custom properties with your colors. So you’d set up your colors for light mode, then when the special dark mode media query matches, you’d re-declare all those variables, and then you’d use them. Pawe\u0142 Grzybek<\/a> has a nice basic explanation. Here’s a comparison.<\/p>\n\n\n\n