-- Leo's gemini proxy
-- Connecting to senders.io:1965...
-- Connected
-- Sending request
-- Meta line: 20 text/gemini; lang=en;
// originally posted on my HTTP blog - amendments are in [ ]
// another really quick just WOW post - this is a glorified toot.
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!
Well you may have noticed [my http blog] 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.
I keep [my HTTP blog] JS free! While not all pages under the senders.io umbrella are javascript free - everything in www.senders.io ([my http] 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.
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.
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!
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!
-- Response ended
-- Page fetched on Thu May 2 02:25:08 2024