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 -