The Case For Minimal WordPress Setups: A Contrarian View On Theme Frameworks, by @kevinlearynet@x.com (@smashingmag):
Smashing Magazine · The Case For Minimal WordPress Setups: A Contrarian View On Theme Frameworks — Smashing MagazineModern frameworks are supposed to help speed up development while providing modern tools and a developer-friendly workflow. In reality, Kevin Leary has found that they cause far more problems than they solve. This ultimately leads to the big question: why are modern theme frameworks so popular, and do they really benefit developers in the long run?
“Tysplash is a themed mini-amusement park (...) inspired by the comic strip “Le Monde de Tys”. (...) Offers a playful experience in an enchanting aquatic world”.
![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://files.mastodon.social/media_attachments/files/113/327/203/427/214/793/original/f1ffb2a81a5fa295.png "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://files.mastodon.social/media_attachments/files/113/327/204/471/754/403/original/1cfd8d9646028e5d.png "/* ✅ 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 }")
