Theme presets

Manti ships six themes. Five of them are a stylesheet you import after index.css; the sixth is what you already have.

import '@manti-ui/styles/index.css';
import '@manti-ui/styles/themes/ocean.css';

That is the whole adoption cost. Every component re-skins: the variant palettes, the neutral hue, the progress fill, and the text selection.

Want something none of these are? The Theme Studio tunes the same tokens and hands back a stylesheet.

What a preset moves

A preset is a palette and nothing else. Each one expands its base colors into the full --variant-* vocabulary, re-points --manti-accent-fill and --manti-selection-* (the two branded roles no [data-variant] block can reach), and sets --manti-cool-hue, the single hue behind every gray, surface, border and text role.

Shape, density and type are deliberately out. Those are product decisions, and a theme you adopt for its color must not quietly resize your controls or round your corners: swap Ocean for Forest and only the color changes. Retune the radius ramp with --manti-radius-factor, or the whole shape profile with data-radius, as its own decision.

The definitions live in presets in @manti-ui/tokens, and packages/styles/scripts/gen-preset-css.mjs generates the stylesheets from them. The contrast floor and the interaction progression are checked per preset in the styles build, so a theme that fails either never ships.

Override on top of one

Theme files sit in @layer manti.theme, above the token defaults and below anything unlayered. Adopt a preset and retune a role on top of it:

@import '@manti-ui/styles/index.css';
@import '@manti-ui/styles/themes/forest.css';

:root {
  --manti-cool-hue: 280;
}

Import order between the two stylesheets does not matter — the layer decides.

More than one theme on a page

For a gallery, a themed section, or a preview pane, import the scoped file once and set data-manti-theme on any container:

import '@manti-ui/styles/themes.css';

<section data-manti-theme="rose">…</section>

Nested scopes re-resolve the neutral ramp and every surface, border and text role locally, so a scoped preset looks the same as its :root twin. data-manti-theme is independent of data-theme — light and dark still follow the OS or whatever you force.

When a preset is not enough

Reach for theming with tokens for a targeted change, or the Theme Studio to tune every role on a live product surface and export the result.

Last updated 13 September 2026