Documentation

Theming

Set color mode and customize brand tokens.

Color mode

Set data-cetha-mode="dark" on the document root or a scoped ancestor. Cetha switches its semantic surface, text, line, and state tokens together.

CSS

:root {
  --cetha-brand: #4f46e5;
  --cetha-brand-strong: #3730a3;
  --cetha-brand-soft: #eef2ff;
}

/* Scope dark mode to any ancestor. */
[data-cetha-mode="dark"] {
  color-scheme: dark;
}

Brand tokens

Override the brand variables after importing Cetha styles. Keep one accent family and verify focus, text, and soft backgrounds as a set.

Token	Purpose	Default
`--cetha-brand`	Primary actions and focus	`#4f46e5`
`--cetha-brand-strong`	Hover and stronger emphasis	`#3730a3`
`--cetha-brand-soft`	Selected and tinted backgrounds	`#eef2ff`
`--cetha-base`	Application canvas	`#f7f8fa`
`--cetha-surface`	Primary content surface	`#ffffff`

Theme boundaries

Reserve data-cetha-theme for named brand themes. Use data-cetha-mode only for light and dark color modes so component behavior stays predictable.

Contrast is part of the theme

Test custom token combinations against text, focus indicators, disabled controls, and semantic status colors.