senders.io - CSS Themes Exist Now!?

CSS Themes Exist Now!?

Yeah news to me too! Seems like according to + the MDN it’s been supported since 2019 for most browsers and + supported by all by now.

This is so wild!

Why is this cool?

Well you may have noticed this is in dark mode now (if you set your + preferences to dark in your OS/Browser). But this is cool because it + means we’re no longer restricted to using Javascript and custom + preferences for websites.

I had assumed this existed because sites like GitHub were defaulting + to darkmode despite me never setting anything in like my profile + settings. But I just assumed based off of my legacy knowledge this was + some custom render trick using javascript.

Still no JS!

I keep this blog JS free! While not all pages under the senders.io + umbrella are javascript free - everything in www.senders.io (this blog) + will always be.

I try to keep that, not only for my sake, but for your sake too - a + javascript free blog means the priority is reading.

Examples

So I achieve darkmode in this blog by doing the following:

/* default / light */
+:root {
+  --background: white;
+  --font: black;
+  --quote: #eee;
+  --link: #0303ee;
+  --linkv: #551a8b;
+  --linkf: #f02727;
+  --articleborder: #060606;
+  --tableborder: #aaa;
+  --tablehead: #ebcfff;
+  --tablez: #eee;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #1e1e1e;
+    --font: #eee;
+    --quote: #444;
+    --link: #00d3d3;
+    --linkv: #cd78f4;
+    --linkf: #f02727;
+    --articleborder: #23ed9b;
+    --tableborder: #aaa;
+    --tablehead: #6f5a7e;
+    --tablez: #313131;
+  }
+}
+

Essentially, I leverage + CSS Variables to define the specific areas I set theme specific + colors (my nav bar is static regardless of dark/light mode for + example).

Then if the media preference is dark - I overwrite the variables with + my dark mode values!

Whats tricky is originally most of these values didn’t actually HAVE + values set - I relied on the system default for things like links and the + page colors in an effort to use minimum CSS as well.

I still feel like I am honoring that since I don’t have to duplicate + any actual CSS this way, I just have a lookup table of color values.

That being said my CSS file is still only about 3kB which is not so + bad. And I’ve actually covered most themed properties already - links, + tables, quotes.

Toggling Themes

Something else I found out during this experiment is you can actually + toggle the themes directly in your developer tooling. By opening your + devtools and going to Inspector (in firefox at least) there are two + buttons in the styles section “toggle light color scheme” and “toggle + dark color scheme” using a sun and moon icon.

This made testing VERY easy and actually is what I noticed to prompt + me into looking up if this was a standard CSS thing or not. So thanks + Mozilla!

Conclusion

Yeah if you’ve never realized this check out the MDN guides on both + variables (I didn’t realize these got put in the standard either!) and + themes!

CSS Variables: + https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties +
CSS Media prefers-color-scheme: + https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme +