Can someone share a guide or how to for detecting the device’s preference and honouring that? That sounds optimal.
/* Dark mode */ @media (prefers-color-scheme: dark) { ... }
The issue with both dark and light modes is so many designers seem to have jumped onto the idea that colour schemes have to be either bright white or darkest black.
I'd much rather see colours that are 'slightly darker' at night and 'slightly lighter' in the daytime. For one thing there are still so many websites with no colour schemes setup at all so if you avoid going to extremes it minimises the contrast difference.
The optimal approach is applying the appropriate `prefers-color-scheme` using CSS alone, while additionally allowing a theme override using JS/storage. Fewer do this though, even though it wouldn't require any cookies and thus no consent dialog.
The worst are sites that only have theme switching gated behind registration.
On page load you get your javascript to check the mode and check the override to add a class to the whole page. It is this class that implements the desired light or dark theme.
Fighting against you is what the browser is doing. You can put a meta tag in to force it to respect one theme or the other so it does not go freestyling.
People that have a page permanently set to light mode (or dark mode) have put in the meta tag but they haven't done the extra work to implement some meaningful choice.
In summary, there is auto, where the browser does its best, one mode enforced with a meta tag, then a full solution where there is a pretty button on the page and some javascript to honour the preference, keeping the preference in local storage.
Bonus points for adding an event observer to detect the change in preferences from outside the browser or in dev tools.
More bonus points for having no FOUC.
Extra, extra bonus points, is to implement not just a 'dark mode', but a DARK mode. In light mode everything is kittens and rainbows, whereas in dark mode the content is kind of gruesome and 'dark'. Any subject can be treated this way, a page on say, watermelons could be full of tasty recipe ideas in light mode, but, in dark mode, it could be about dropping them off tall buildings with busy streets below...