Dark Mode

I'm unsure if it's an age thing, or a preference that you develop over time - but in the last decade or so, I've favoured Dark Mode for both my laptops and phone.

Gradually, as more users switch to Dark Mode, applications have been catching up. I was very excited to try SQL Server Management Studio's Dark Mode, after finding various hacks to be incomplete.

The web also supports Dark Mode: as a preference that you have to choose in your profile, or by clicking/tapping on a button - or automatically. I had always intended on making a Dark Mode for my own websites, but until recently, hadn't spent time developing them.

So, this evening I decided to sit down and give it a go - to both update slickhouse.com and also my Framework project, which it utilises.

To begin with, I cracked open Chrome Developer Tools and inspected the HTTP request made by my browser - and the response received from the server. I expected to see HTTP Headers set, specifying my system preference of Dark Mode. But there was nothing of the sort.

I then wondered if it was optional and hadn't been specified as accepted by the server, so the client didn't bother including it in requests. Looking at all of the HTTP Headers, Session and Cookies yielded nothing either.

Reluctant to resort to a Google search, I checked my bookmarks - as I'm sure I've read a few articles discussing ways to feature dark/light mode on a website. Scott Hanselman delivered with How to detect if the User's OS prefers dark mode and change your site with CSS and JS .

To my surprise at both the simplicity and obviousness of it, Dark Mode can be activated using Media Queries:

@media (prefers-color-scheme: dark) {

This makes perfect sense, as it's up to the browser rendering the webpage, rather than the server piecing it together - much the same way as print stylesheets are applied.

I updated the 5_mediaqueries.css file, by specifying the additional media query and set to work applying changes in the stylesheet and watching them live-refresh in the browser.

You can see the full commit containing the various styles applied to the Framework project.

Currently it's all based on your browser/system preference. But it would be easy to adapt to include an option that the user could toggle, on the website - via a button. A bit of javascript, an additional class on the body and Bob's your uncle. Something for another evening, perhaps.

As a side note - the <code> and <pre> elements are inspired by Dracula Theme - which I can highly recommend, for applying a consistent Dark Theme across most of your apps.