Yumma CSS 3.29
Dark mode with light-dark support. Configuration changes, improvements & other QoL changes.
Dark mode, with no variant to write on every utility & no second set of classes to maintain.
Paired Colors
Use a light or dark theme color instead of just one value. The pair is basically CSS light-dark(), which works for each color scheme.
export default defineConfig({ source: ["..."] theme: { colors: { brand: "#bec6f2", surface: { light: "#ffffff", dark: "#111214"}, }, },});
Both sides are scaled & paired step for step, so the whole shade 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.
Color Scheme
Yumma CSS declares color-scheme: light dark on :root as soon as your theme holds a pair, so the page follows the operating system with no extra setup.
It is an inherited property, so a theme toggle is one class on whatever subtree you want to override. Native scrollbars & form controls follow along too.
<html className="cs-ld">
{/* follows the operating system */}
<div className="cs-l">Always light</div>
<div className="cs-d">Always dark</div>
</html>
cs-ld follows the operating system & cs-d / cs-l force a scheme. The cs prefix is shared with corner-shape, but 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 is used to add a hex alpha pair to the color, but it 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 a paired color carry an opacity suffix at all.
Editor Fixes
Hovering a class 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.