One complaint I've seen here a bunch of times with `prefers-color-scheme` was about duplicating styles.
You don't have to do that when you switch by toggling a single `--dark` variable!
(from State of CSS results https://2024.stateofcss.com/)
#CSS #theming #code #coding #frontend #web #dev #webDev #webDevelopment
![From the comments on `prefers-color-scheme`:
* Not entirely related to this, but it would be amazing if we could target `prefers-color-scheme` along with user selected preferences, i.e. [data-theme=dark], in a single ruleset
* Wish I could combo this with the inevitable user-control hook as well though. Some kind of hybrid @media and regular selector, so you don't have to repeat everything within both an @media clause and then again with some kind of global selector e.g. body[data-theme="dark"]
* I really wish there was a way to use "dark mode" detection outside of a media query. I constantly want to treat "user selected dark mode" on my website the same as "auto theme + system dark mode", but I have to duplicate styles with the way CSS works right now! It's a huge bummer.](https://friendica.hellquist.eu/photo/preview/640/3302711 "From the comments on `prefers-color-scheme`:
* Not entirely related to this, but it would be amazing if we could target `prefers-color-scheme` along with user selected preferences, i.e. [data-theme=dark], in a single ruleset
* Wish I could combo this with the inevitable user-control hook as well though. Some kind of hybrid @media and regular selector, so you don't have to repeat everything within both an @media clause and then again with some kind of global selector e.g. body[data-theme=\"dark\"]
* I really wish there was a way to use \"dark mode\" detection outside of a media query. I constantly want to treat \"user selected dark mode\" on my website the same as \"auto theme + system dark mode\", but I have to duplicate styles with the way CSS works right now! It's a huge bummer.")
![/* ✅ DO (DRY) ✅ */
body {
--dark: 0; /* 0 initially for light theme; 1 for dark theme */
/* how much the dark version represents;
* 0% in light theme case, 100% in dark theme case */
--perc: calc(var(--dark)*100%);
background: color-mix(in hsl, $dark-back var(--perc), $light-back);
color: color-mix(in hsl, $dark-text var(--perc), $light-text);
}
a { color: color-mix(in hsl, $dark-link var(--perc), $light-link) }
/* other styles */
/* switch to dark theme cases */
body:has([data-theme-option='dark'][aria-pressed='true']) { --dark: 1 }
@media (prefers-color-scheme: dark) { --dark: 1 }](https://friendica.hellquist.eu/photo/preview/640/3302713 "/* ✅ DO (DRY) ✅ */
body {
--dark: 0; /* 0 initially for light theme; 1 for dark theme */
/* how much the dark version represents;
* 0% in light theme case, 100% in dark theme case */
--perc: calc(var(--dark)*100%);
background: color-mix(in hsl, $dark-back var(--perc), $light-back);
color: color-mix(in hsl, $dark-text var(--perc), $light-text);
}
a { color: color-mix(in hsl, $dark-link var(--perc), $light-link) }
/* other styles */
/* switch to dark theme cases */
body:has([data-theme-option='dark'][aria-pressed='true']) { --dark: 1 }
@media (prefers-color-scheme: dark) { --dark: 1 }")
State of CSS 2024
The 2024 edition of the annual survey about the latest trends in the CSS ecosystem.2024.stateofcss.com
