mirror of
https://github.com/dgtlmoon/changedetection.io.git
synced 2026-10-25 16:18:32 +00:00
Tim Bond
22369731e3
Currently dark mode is only available to users that have opted-in by selecting a cookie. Users that have set their device preference to dark still see light mode until they've specifically clicked the button to set the cookie. Without a css_dark_mode cookie the page now renders data-darkmode="auto", and the dark styles apply under @media (prefers-color-scheme: dark), so a device in dark mode gets the dark theme without opting in from the menu. Pure CSS - no flash of the wrong theme and no JS needed. The cookie set by the menu toggle still wins either way, so light-mode devices can choose dark and vice versa. In "auto" the toggle reads the current effective theme via matchMedia so the first click always flips it. A dark-mode SCSS mixin emits each dark block for both html[data-darkmode="true"] and the auto+media-query case; the processor badge and tag colour rules generated outside SCSS get the same pair.