Theming - Kanso Labs

Every design token, colour, spacing, radii, sizing, shadows, typography and state-layer opacity, is backed by a CSS custom property under the --kui-* namespace. Override any of them in your own stylesheet to retheme every component, whatever your app’s build tooling:

:root {
  --kui-color-primary: #ff5722;
  --kui-color-on-primary: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --kui-color-primary: #ffab91;
    --kui-color-on-primary: #3e0800;
  }
}

Overrides on :root reach the whole page. To theme part of one, see Theming part of a page.

Finding the names

@kanso-labs/kanso-ui/tokens.css is the generated reference for every available property and its default value. It is for discovering names and is not needed at runtime, since components already carry their defaults:

import '@kanso-labs/kanso-ui/tokens.css'

The tokens are also published as @kanso-labs/kanso-ui/tokens.json, the W3C Design Tokens (DTCG) source they are built from, for a library or tool that builds its own output from the same values. Both come from Kanso UI Core.

The same theme on React Native

Kanso UI for React Native reads the same --kui-* names with the same CSS values, so one theme object serves a web app and a native app alike.

For StyleX consumers

An app that also uses StyleX themes the same way, through the --kui-* properties and ThemeScope. The token objects stylex.createTheme() would take aren’t part of the public API yet; open an issue if you need them exported.

Material Theme Builder

Generate a whole scheme from one colour.

Part of a page

Scope a theme with ThemeScope.

Light or dark

Pin a scheme from your own switch.

⌘I

​Finding the names

​The same theme on React Native

​For StyleX consumers