melaus

Dark theme has become a standard feature across all systems on phones and computers - whether in apps or on websites, they're everywhere.

Naturally, I'm a big fan. I find it to make colours pop out more in images and easier on the eye in darker settings (or any time as a software developer... 😛).

A quick search has found me a lovely article by Ananya that steps through this line by line. Some quick CSS and Javascript magic later, voilà!

A visitor can use the toggle located at the bottom of any pages on this website to change between the light and dark theme. This information is stored locally within the visitor's browser, so that on subsequent visits, your browser will remember your preference and display your last chosen theme 💪.

Even better, I've extended it to check if the visitor's system declares its preferred theme by matching on the media feature prefer-color-scheme, which is supported by most modern browsers (see "Browser compatibility" section). This means that the most suitable theme is picked magically on a visitor's first visit or if they have never toggled between the themes before.

As I go through the depths of Google, I read further into making better dark themes. I came across this article by Chethan on dark theming Android apps. What interested me the most was the idea of the "Colour Palette". It helped me pick a lighter shade of my original colours without having to do too much fiddling with HEX or RGB codes to get the colours I want.

My frontend skill is basic to say the least, so it's nice to see these guides around which enabled me to get this working in no time. This also makes me realise the clutter underneath this website ― a 2020 me is a lot better at writing code than the 2016 me. There's some under-the-hood fixing to do...

I'll get on with it at a later date. For now, let's just take a moment and enjoy this gorgeous dark theme! 😇