🔗 How to detect light or dark mode at the OS level with JavaScript

Recently I needed to update some settings and swap out some components in a Svelte app depending on the users colour theme choice -- i.e. light or dark mode.

We'd been using Svelte's built in state handling mechanism (Svelte 4, so not Runes, but the writeable() stores business) and checking that. This was set directly by the user when they got in amongst the settings area of the app. It worked; all was well.

That was, until we discovered that if you load the app without choosing a particular light or dark theme in the app, leaving it as system then the app relies on your OS or browser-level theme choice.

The challenging part was that the user preference was still set, but the app wasn't deriving this from state. TL;DR: I needed to know what their preferences were from a higher, system level.