Dark Mode

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

Pair a Color

A color applies in both schemes until you give it a light & a dark value, which compiles to CSS light-dark().

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

Every shade is paired too, so bg:surface-3 follows the scheme.

Opacity

Opacity modifiers work on paired colors through color-mix().

<div className="bg:surface/50"></div>