Allright, here's a dark mode switch. Because it's cool and I was bored.
I learned only a few months ago that variables and nesting had both made their way into the CSS standard. And apparently it's been long enough that most major browsers should support it.
That's sweet. Those were the only two features I actually used in LESS, so I ditched it.
Using those variables, here's the entirety of the dark-mode specific code I needed:
body.theme-dark {
--background-color-main: #1c1b22;
--background-color-scrolltop: grey;
--background-color-tooltip: #312f3b; /* main background lightened by 10 % */
--txt-color: #fff;
--txt-color-light: darkgrey;
--txt-color-tooltip: #fff;
--link-color-hover: orange;
}
body.theme-dark img {
filter: brightness(.95) contrast(1.2);
}
(And apparently, pygment1 can't handle css nesting. Oh well.)
Of course I had to actually use the new variables in the rest of the stylesheet, but that's not too bad, and it should make it easier to change things around down the road.
I hope you'll find it pretty. If you don't, consider that I seriously entertained going with this:
I honestly kind of like it. It's brash and amateurish, but I happen to like that vibe. Maybe I will switch back to it just to piss people off.
Also, it reminds me of the posters my dad used to make.2
Oh, by the way, I'm storing your chosen theme in your browser's localStorage
,
so I guess I'm technically kind of tracking your activity. Let's hope the GDPR
won't get me for this.
On a completely unrelated note, it's been a month since this site launched. Looks like I'm still having fun with it. So, that's cool I guess.