There was some user feedback this site should have a light mode instead of all-dark-all-the-time. The theme of this site is simple enough that some quick design tweaks is all it took.<\/p>\n\n\n\n
But here’s the thing: it just relies on your system preference. <\/p>\n\n\n\n
(Or whatever is controlling what It’s more on-trend when offering color modes to offer users a toggle.<\/strong> That way users can easily choose between which they prefer without ever leaving your site. And they might have a preference that is the opposite<\/em> of what their overall system preference is. Those are perfectly fair and legitment things.<\/p>\n\n\n\n Those things also complicate the work. <\/p>\n\n\n\n I think it’s also perfectly fair to make development choices that are purposefully un<\/em>complicated. <\/p>\n\n\n\n In this case, choosing to support light and dark modes entirely within CSS alone<\/em> was the uncomplicated choice. <\/p>\n\n\n\n It really is just this:<\/p>\n\n\n Then steadfastly use those color variables everywhere any color is set.<\/p>\n\n\n\n The red stays the same across both. Fortunately red is fine with that. <\/p>\n\n\n\n The main point of modes is that most<\/em> of the color should be dominantly dark or dominantly light, which is mostly<\/em> about backgrounds. So the But it’s never quite that easy<\/em>. You always need to need a couple of more colors, even on simple sites. So here I’m setting up variables for links and a couple of variations. <\/p>\n\n\n\n Purposefully simple.<\/p>\n\n\n\n I kinda like approach of just changing same-named I’d say it’s still worth doing if you’re working on a “big” site where you expect quite a bit of time-on-site from your users. You can also do something like I’ve done above as a first step<\/em> and then move onto a toggle approach. <\/p>\n\n\n\n I swear the change is much smoother than this (no thanks to prefers-color-scheme<\/code> is returning in your browser. I use the browser Arc sometimes and it’s Light\/Dark modes override what is set in my System Preferences. It can get confusing<\/a>.)<\/p>\n\n\n\nThe Basics<\/h2>\n\n\n\n
html<\/span> {\n --brand-red<\/span>: oklch<\/span>(0.67<\/span> 0.24<\/span> 27.98<\/span>);\n\n --bg<\/span>: black;\n --text<\/span>: #ffdbdb<\/span>;\n\n --link-color<\/span>: #4ac6ff<\/span>;\n --link-color-hover<\/span>: #9ce0ff<\/span>;\n --bright-color<\/span>: white;\n --faded-color<\/span>: #373232<\/span>;\n}\n\n@media<\/span> (prefers-color-scheme:<\/span> light) {\n html<\/span> {\n --bg<\/span>: white;\n --text<\/span>: #323232<\/span>;\n\n --link-color<\/span>: #068dcb<\/span>;\n --link-color-hover<\/span>: #67cfff<\/span>;\n --bright-color<\/span>: black;\n --faded-color<\/span>: #dedede<\/span>;\n }\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n--bg<\/code> background does the work there and the --text<\/code> variable is an accessible color that sits on top of that background. <\/p>\n\n\n\n--custom-properties<\/code> myself, but there are alternatives. For instance you could use named colors (e.g. --my-gray-8<\/code>) then use the now well-supported light-dark()<\/code> function<\/a> to do something like:<\/p>\n\n\n.card<\/span> {\n background<\/span>: light-dark<\/span>(var(--my-gray-4<\/span>), var<\/span>(--my-gray-9<\/span>));\n color<\/span>: light-dark<\/span>(var(--my-gray-9<\/span>), var<\/span>(--my-gray-1<\/span>))\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\nWhy is offering a site-level toggle so challenging?<\/h2>\n\n\n\n
\n
@media<\/code> very cleanly. But you still need to use @media<\/code> for the default if there isn’t a choice, so you can’t back away from it entirely. <\/li>\n\n\n\nlocalStorage<\/code> or cookies, but you’d probably want to do better than that.<\/li>\n\n\n\nThe Effect<\/h2>\n\n\n\n
transition<\/code> or anything, macOS just makes it super smooth somehow). But when I was recording this video it wanted to be a more more abrupt \ud83e\udd37\u200d\u2640\ufe0f. <\/p>\n\n\n\n\t\t