Pick a base and an accent.

Using a theme

In a new project

Pass the pair to init, and the theme stylesheet it copies starts with them applied.

npx ermineui init --theme slate,blue

pnpm dlx ermineui init --theme slate,blue

yarn dlx ermineui init --theme slate,blue

bunx ermineui init --theme slate,blue

In a project already set up

Name a base, an accent, or both. Picking one kind keeps the other, so the second line below keeps the slate base and swaps the accent. --reset removes both, back to your stylesheet's own colours. Run theme on its own to list the themes and see which ones you are using.

npx ermineui theme slate blue
npx ermineui theme rose
npx ermineui theme --reset

pnpm dlx ermineui theme slate blue
pnpm dlx ermineui theme rose
pnpm dlx ermineui theme --reset

yarn dlx ermineui theme slate blue
yarn dlx ermineui theme rose
yarn dlx ermineui theme --reset

bunx ermineui theme slate blue
bunx ermineui theme rose
bunx ermineui theme --reset

What changes in your stylesheet

Each theme goes at the end of your theme stylesheet as a :root block of --er-* variables, between two marker comments. The next theme command replaces only what sits between those markers, so the rest of the file, including your own edits, stays as it is. This is the block for blue:

/* ermine theme accent: blue. "ermine theme" replaces this block when you pick another accent.
   To fine-tune a colour, set it again in a rule after this block. */
:root {
  --er-primary: light-dark(oklch(0.546 0.215 262), oklch(0.707 0.15 254));
  --er-primary-foreground: light-dark(oklch(0.985 0 0), oklch(0.2 0.05 262));
  --er-ring: light-dark(oklch(0.546 0.215 262), oklch(0.707 0.15 254));
}
/* end ermine theme accent */

Every component reads these variables, so nothing else needs changing. Dark mode works as before: each value holds a light and a dark colour in light-dark().

Adjusting a colour

Don't edit inside the markers, because the next theme command replaces that block. Set the variable again in a rule after it:

/* After the theme's block, so it wins */
:root {
  --er-primary: light-dark(oklch(0.5 0.22 262), oklch(0.75 0.14 254));
}

Without the command line

Choose a pair in the picker above, open Or paste the CSS, and paste the CSS at the end of your theme stylesheet. Put the base before the accent, because both set the primary colour and the later one wins. To theme only one section, change :root to a selector for that section:

/* The rose accent for one part of the page only */
.campaign {
  --er-primary: light-dark(oklch(0.56 0.21 17), oklch(0.73 0.15 12));
  --er-primary-foreground: light-dark(oklch(0.985 0 0), oklch(0.2 0.05 17));
  --er-ring: light-dark(oklch(0.56 0.21 17), oklch(0.73 0.15 12));
}

From an AI coding tool

Tools connected to ermine mcp can apply themes with its set_theme tool. Ask for "the slate base with a blue accent" and the tool writes the same blocks the command does.

Bases

• neutral: Pure greys with no tint. The default.
• blush: Greys with a soft pink tint.
• stone: Warm, slightly brown greys.
• sand: Warm greys with a soft golden tint.
• olive: Greys with a soft yellow-green tint.
• sage: Greys with a soft green tint.
• mist: Cool greys with a soft blue-green tint.
• slate: Cool, blue-tinted greys.
• zinc: Greys with the faintest violet cast.
• mauve: Greys with a soft purple tint.

Accents

• rose: The primary colour and focus ring in rose.
• red: The primary colour and focus ring in red.
• orange: The primary colour and focus ring in orange.
• amber: The primary colour and focus ring in amber.
• green: The primary colour and focus ring in green.
• teal: The primary colour and focus ring in teal.
• cyan: The primary colour and focus ring in cyan.
• blue: The primary colour and focus ring in blue.
• indigo: The primary colour and focus ring in indigo.
• violet: The primary colour and focus ring in violet.
• fuchsia: The primary colour and focus ring in fuchsia.
• pink: The primary colour and focus ring in pink.

With no accent, the primary colour is the base's own near-black (near-white in the dark theme).