💾 Archived View for the.teabag.ninja › css-auto-light-dark.gmi captured on 2024-12-17 at 09:42:00. Gemini links have been rewritten to link to archived content

-=-=-=-=-=-=-

CSS Auto-Light/Dark Mode

2024-09-21 teabag.ninja

I try and keep my css minimal, as I hate unnecessary fluff. Likewise I generally like to keep images smaller. Sure I have a decent internet connection, but that doesnt mean things need to be massive. Because they don't; we've just gotten very lazy.

Anyway, I was looking at some css recently and it occured to me that they had done automatic light/dark switching in an extremely tidy way. I didn't even know this was possible, but I love it!

The first two :root sections as shown below are what is required, and should be self explanatory. That is what this blog is currently and I have similarly updated my fediverse snac instance.

I have also put both css on codeberg.

:root {
    color-scheme: light dark;
}

:root {
    --text: light-dark(black, white);
    --bg: light-dark(white, black);
    --highlight: light-dark(teal, teal);
    --details: light-dark(#a0a0a0, #a0a0a0);
}

.sutter-avatar { float: left; max-width: 40px; padding: 0.25em }
.sutter-author { font-size: 90% }
.sutter-pubdate { color: var(--details); font-size: 90% }
body { color: var(--text); background-color:var(--bg); font-family:monospace; max-width:48em; margin:auto; line-height:1.5; padding:0.8em; word-wrap:break-word; }
.permalink { text-decoration:none; }
pre { overflow-x: scroll; color: black; background-color:lightgrey; padding:0.5em; border-radius:4px; font-family:monospace; }
blockquote { border: 0.2em solid var(--highlight); padding:0.5em; border-radius:0.5em;}
a { color:var(--text); }
a:visited { color:var(--text); }
a:hover { color:var(--details); }
img { max-width:100%; }
h1 { color:var(--highlight) }
h2 { color:var(--highlight) }
figcaption { color:var(--details) }

And that is it.

The Teabag Ninja