Dark Mode

Every color utility applies in both color schemes by default. To make one differ, define it as a light/dark pair instead of a single value. The pair compiles to CSS light-dark(), which resolves per color scheme.

There is no token vocabulary to adopt & no variant to write on every utility. Pair only the colors you want to change.

Pair a Color

1. 1

   Define the Pair

   A value of { light, dark } replaces a single color string.

   Copy

   import { defineConfig } from "yummacss";
   
   export default defineConfig({
     theme: {
       colors: {
         surface: { light: "#ffffff", dark: "#111214" },
       },
     },
   });
   

2. 2

   Use It

   Nothing changes in your markup.

   htmlcss

   Copy

   <div className="bg-surface …"></div>
   

Both sides are scaled independently & paired step for step, so the whole shade scale comes along: bg-surface-3 is the third light shade under a light scheme & the third dark shade under a dark one.

Opacity

Opacity modifiers work on paired colors, because opacity is applied with color-mix() rather than by appending hex alpha.

<div className="bg-surface/50 …"></div>