Theming

The accent drives primary buttons, active states and focus rings. Cotton UI uses a 3-value accent system:

• --color-accent - primary fills (button backgrounds, active states)
• --color-accent-content - hover states and readable accent text
• --color-accent-foreground - text and icons on accent fills

A neutral ink accent ships by default. Brand the kit by overriding the three tokens in a :root block, with matching values under .dark. Same tokens whether you drop them in the inline <style> of the no-build setup or in your app.css on a custom build:

:root {
    --color-accent: var(--color-blue-500);
    --color-accent-content: var(--color-blue-600);
    --color-accent-foreground: var(--color-white);
}

.dark {
    --color-accent: var(--color-blue-400);
    --color-accent-content: var(--color-blue-300);
    --color-accent-foreground: var(--color-blue-950);
}

Use the Theme Builder to preview and generate the CSS to copy into your app.css.

Where the accent is your brand colour, ink is the neutral the rest of the UI is built from: text, borders, dividers, surfaces and the off-accent state. Re-tone the whole UI by pointing the --color-ink-50…950 tokens at another scale:

:root {
    --color-ink-50: var(--color-stone-50);
    --color-ink-100: var(--color-stone-100);
    /* …through the scale… */
    --color-ink-900: var(--color-stone-900);
    --color-ink-950: var(--color-stone-950);
}

The Theme Builder generates the full block for any tone, including the warm and cool neutrals the kit ships (taupe, mauve, mist, olive).

Add :accent="False" as a property to turn off accent highlights for a component. Its selected and active states (a checked radio, an on switch, a selected card) render in ink instead, no theme changes needed, so they re-tone with your neutral and flip light/dark on their own.

The off-accent fill is the --color-accent-muted token, which defaults to ink (--color-ink-900 / --color-ink-100). Override it for a different neutral, e.g. a softer mid-ink:

:root {
    --color-accent-muted: var(--color-ink-600);
}

.dark {
    --color-accent-muted: var(--color-ink-400);
}

Side by side

Two radius tokens control rounding. Form controls and structural surfaces are kept separate so you can, for example, round cards more than inputs:

• --radius-control - form controls (inputs, buttons, segments)
• --radius-box - structural surfaces (cards, dialogs, menus)

Override in the same :root block as the accent tokens.

Surfaces are the page base and the raised surfaces (cards, dialogs, menus) that sit on top of it. Two knobs:

• --color-bg - page base background
• --surface-level - how much raised surfaces lift off the page (mixed with white). 100% in light gives flat white cards; 6% in dark lifts subtly off ink-950

--color-surface is derived from those two — you rarely override it directly. Same for --color-input-bg: transparent in light so form fields are border-defined, a faint lift in dark.

:root {
    --color-bg: var(--color-ink-50);   /* page base */
    --surface-level: 100%;              /* flat white cards */
}

.dark {
    --color-bg: var(--color-ink-950);
    --surface-level: 6%;                /* subtle lift off the dark page */
}

The complete set of themeable tokens and their defaults. Override any of them in a :root block, and set dark-mode values under .dark.

Because every token is a Tailwind @theme colour, it also generates an ordinary utility (text-*, bg-*, border-*). Reach for these in your own markup instead of hard-coded colours and it re-tones with the kit, including live edits from the Theme Builder.

Opacity modifiers work too, e.g. bg-accent/10 for a faint accent tint.