uix-uiTheming
A theme is a CSS file of tokens. Swap the file and every component takes on the new look.
How a theme works
A theme is one CSS file, src/styles/uix.css. It is a Tailwind v4 theme: colour ramps, a type scale, spacing, radius and shadows, in light and in dark.
Components never use raw colours. They use named tokens such as bg-brand and text-fg-primary, and those point at the ramps. Change the file and every component changes with it.
Colour ramps
Each ramp runs from 50 (lightest) to 950 (darkest), for example --color-primary-500. The ramps are primary, secondary, neutral, and the feedback colours error, warning and success.
Semantic tokens
Semantic tokens say what a colour is for. Each one points at a ramp step, and the dark values are swapped in when data-theme="dark" is set. Here is a part of the default theme.
| Variable | Tailwind class | Light | Dark |
|---|---|---|---|
--bg-canvas | bg-canvas | neutral-50 | neutral-950 |
--bg-surface | bg-surface | white | neutral-900 |
--bg-brand | bg-brand | primary-600 | primary-500 |
--bg-brand-hover | bg-brand-hover | primary-700 | primary-400 |
--bg-danger | bg-danger | error-500 | error-500 |
--text-primary | text-fg-primary | neutral-900 | neutral-50 |
--text-secondary | text-fg-secondary | neutral-600 | neutral-300 |
--text-on-brand | text-fg-on-brand | white | white |
--text-brand | text-fg-brand | primary-600 | primary-400 |
--border-default | border-line-default | neutral-200 | neutral-700 |
--border-focus | border-line-focus | primary-400 | primary-500 |
Spacing (--spacing-4), radius (--radius-md), fonts (--font-heading, --font-body, --font-mono) and the type scale (--text-heading-1, --text-body-large and so on) are tokens too.
Switch themes
One command swaps the theme. It rewrites src/styles/uix.css and updates the font links. Your components stay exactly as they are. Leave the name out, or use uix, for the default.
$ npx uix-ui@latest theme ember-ledgerBrowse all of them on the themes page.
Try it
Pick a theme. The whole page changes with it, and so do the components below.
--bg-canvas--bg-surface--bg-brand--bg-brand-hover--bg-secondary--bg-danger--bg-success--bg-warning<Button>Save</Button>
<Button variant="outline">Cancel</Button>
<Badge color="success">Paid</Badge>
<Input label="Email" placeholder="you@example.com" />
<Switch label="Email me updates" />Customise tokens
Change a token in your own CSS, after the theme import. Do not edit uix.css: running init or theme writes it again.
@import "tailwindcss";
@import "./styles/uix.css";
/* Your changes go after the import. */
:root {
--bg-brand: var(--color-primary-700);
--radius-md: 6px;
}
[data-theme="dark"] {
--bg-brand: var(--color-primary-400);
}Prefer to keep the theme out of your source? The @uix-ui/tailwind package has the same themes: @import "@uix-ui/tailwind/themes/<preset>.css";.
Visual styles
data-skin on html or on any wrapper, and everything inside it follows. Without it you get the Modern look. Add the styles once with UIX_LICENSE=<key> npx uix-ui add skins; the CLI imports them into your CSS.<html data-skin="minimal" data-theme="dark">
<section data-skin="glass">
<!-- components in here wear the Glass style -->
</section>Pro also covers templates and blocks and all 251 themes. See pricing.