mirror of
https://github.com/dgtlmoon/changedetection.io.git
synced 2026-10-29 10:05:45 +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.
36 lines
873 B
SCSS
36 lines
873 B
SCSS
/**
|
|
* SCSS variables (compile-time)
|
|
* These can be used in media queries and other places where CSS custom properties don't work
|
|
*/
|
|
|
|
// Breakpoints
|
|
$desktop-wide-breakpoint: 980px;
|
|
|
|
$common-gap: 0.55rem;
|
|
$top-menu-icon-size: 1.3rem;
|
|
|
|
// Dark mode styles. <html data-darkmode> is "true"/"false" when the user picked a theme
|
|
// (css_dark_mode cookie), or "auto" to follow the device's prefers-color-scheme.
|
|
// Use at the top level, or nested where the parent selector should follow html[...].
|
|
@mixin dark-mode {
|
|
@if & {
|
|
html[data-darkmode="true"] & {
|
|
@content;
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
html[data-darkmode="auto"] & {
|
|
@content;
|
|
}
|
|
}
|
|
} @else {
|
|
html[data-darkmode="true"] {
|
|
@content;
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
html[data-darkmode="auto"] {
|
|
@content;
|
|
}
|
|
}
|
|
}
|
|
}
|