Fun with CSS

This page has a different color scheme to the rest of the site. How did I do that, if I’m using a static site generator that can’t extract any metadata other than the page title?

Easy. I stuck this little bit of HTML on the page: <span class="solarized"></span>

And wrote this little piece of CSS:

:root:has(span.solarized) {
    color-scheme: light dark;
    --fontsize: max(1em, 24px);
    --bg: light-dark(#fdf6e3,#073642);
    --bg2: light-dark(#eee8d5,#002b36);
    --text: light-dark(#073642,#fdf6e3);
    --link1: #2aa198;
    --link2: #cb4b16;
    --link3: #268bd2;
    --italic: light-dark(#073642,#fdf6e3);
    --bold: light-dark(#073642,#fdf6e3);
    --strike: light-dark(#07364299,#fdf6e399);
    --link1s: #2aa19899;
    --link2s: #cb4b1699;
    --link3s: #268bd299;
    --tab: #268bd2;
    --tabdisabled: #268bd299;
    --tabtext: #fdf6e3;
    --details: light-dark(#eee8d5,#002b36);
    --summary: light-dark(#93a1a1, #586e75);
    --summarycolor: light-dark(#073642,#fdf6e3);
    --detailsborder: #2aa19899;
    --code: light-dark(#93a1a1, #586e75);
}

(The palette for this page is Solarized, btw.)

I am so powerful now.