Yumma CSS 3.29
Dark mode with light-dark()
Yumma CSS 3.29 adds dark mode. No variant to write on every utility, no duplicated CSS, no flash of the wrong theme, & no JavaScript beyond flipping one attribute.
Paired Colors
A theme color can now be a light/dark pair instead of a single value. The pair
compiles to CSS light-dark(), which resolves per color scheme.
export default defineConfig({ theme: { colors: { brand: "#bec6f2", surface: { light: "#ffffff", dark: "#111214" }, }, },});<div class="bg-surface"></div>background-color: light-dark(#ffffff, #111214);Both sides are scaled independently & paired step for step, so the whole scale
comes along - surface-3 is the third light shade under a light scheme & the
third dark shade under a dark one. Plain string colors behave exactly as
before.
That is the whole feature. There is no token vocabulary to adopt & no variant to write on every utility. Every color you already use keeps applying in both schemes; pair only the ones you want to change.
Yumma CSS declares color-scheme for you as soon as your theme contains a
pair, so the page follows the operating system preference with no further
setup.
:root {
color-scheme: light dark;
}color-scheme is an ordinary inherited property, so a theme toggle is one
class on whatever subtree you want to override - every paired color beneath it
follows, & so do native scrollbars & form controls.
<html class="cs-ld">
<!-- follows the operating system -->
<div class="cs-l">Always light</div>
<div class="cs-d">Always dark</div>
</html>cs-ld follows the operating system, & cs-d / cs-l force a scheme. Point a
theme toggle at the <html> class & every paired color in the document
follows. The cs prefix is shared with corner-shape - the value sets do not
overlap, so cs-s is still a squircle.
This is the part prefers-color-scheme cannot do: a media query cannot be
overridden by a button, so a manual toggle would otherwise mean duplicating
every rule.
Opacity now uses color-mix()
The opacity suffix used to append a hex alpha pair to the color, which only
worked on a 6-digit hex value. It now generates color-mix(), which accepts
any color value.
background-color: #bec6f21a;background-color: color-mix(in srgb, #bec6f2 10%, transparent);Nothing changes in your markup - bg-accent/10 is still bg-accent/10. The
practical difference is that opacity now works on colors that are not plain
hex, which is what lets paired light/dark colors carry an opacity suffix at
all.
<div class="bg-surface/50"></div>Editor Fixes
Hovering a class in the editor returned nothing for negative values (m--4),
pseudo elements (s::bg-red), & opacity suffixes (bg-blue/50). All three now
show their CSS. A pseudo element is also no longer described as the pseudo
class of the same name - a:: is :after, a: is :active.
Check the changelog for the full list of changes.