Dark Mode

Opt into dark mode per color with light/dark pairs.

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.

Pair a Color

  1. 1

    Define the Pair

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

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

    Use It

    Nothing changes in your markup.

    <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>