Raphi Rambles

Implementing Dark Mode

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:

A screenshot of this page in an alternate version of dark mode with bright yellow text.

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.


  1. The python library I'm using to highlight the code snippets. 

  2. Those only had a few lines of text, so obviously it wasn't as overwhelming. But the yellow on black titles made them stand out and was pretty distinctive. 

^