The truth is that you need to do device detection, so the @prefers CSS stuff, then you need to have a toggle to over-ride things. Then you need some javascript to store the preference in local storage.
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...
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...