Skye’s Website / Blog / Dark Mode (for my Website)

Prelude

As I slumber, a thought darts through my mind. It’s a question, a short one, and a deceptively simple one at that;
“Is it possible to make my website compatible with dark mode?”

I bolt upright, dazed and confused. Desperate to not forget this question.
(Surely, it must be possible, it should be a standard or something, right?)

Stumbling to the kitchen, I start the process of making a perfect good enough (not ISO standard) cup of tea. Then, I look at my phone, and see if this is indeed some kind of standard that I can just use, to get a dark mode with minimal effort.
(Oh, so it is.)

Yeah, as it turns out its CSS standard, which is a good sign. Let’s get started, shall we?

But, Why?

Admittedly the previous part was a dramatization. The actual reason is that working on the website on my laptop at night (for the previous blog post) gave me a horrific headache the next morning that required someone to cycle to the nearest town to grab a box of paracetamol.
Whilst I’m glad that did resolve the headache, I feel like (to avoid giving people headaches), I should make a dark mode version of my site. I knew that it was possible for websites to detect a dark mode setting, so I wondered how. Given that it’s possible with static CSS and no JS, it’s good enough for me, so I’ll implement it, and am documenting the process here.

Implementation

/* I'll invert white and black, and make links more visible against the background, and that should be enough. */
@media (prefers-color-scheme: dark) {
    body {
        background-color: black;
        color: white;
    }
    :link {
        color: #00FFFF;
    }
    :visited {
        color: #FF00FF;
    }
}
/* extra details for the rest of my CSS omitted. You may have to manually override more than just links, for example. */

Does it work?

Yes.

Screenshot of a mobile phone, on skyem.co.uk showing white text on a black background, with unclicked links being bright teal and clicked links being bright magenta, which means that the dark mode CSS works.

Also if you're visiting this post with dark mode enabled, you should literally be seeing it right now.

The Obvious Limitation

No, there is no dark mode toggle on the site itself. It relies on the browser doing things properly. Personally this is not a problem, but it might for others. Just be aware of that.

Conclusion

It was about as easy as I was hoping it was to be, honestly.
The only tricky part was that I needed to have a workaround for the fact that the way I did custom bullet-points for the unordered lists of links didn’t really respond well to being styled, which is kind of my own fault and not really relevant for this entry.

(Let’s also ignore the fact that I mixed up tabs and spaces in my CSS, alright?)

Again, you can contact me if you have any thoughts or corrections, or any questions. Also, you can give me money if you really want to for some reason, but again that is optional.

Thanks for reading!

What next?