> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kansolabs.org/llms.txt
> Use this file to discover all available pages before exploring further.

# Theming

> Retheme every component by overriding the --kui-* custom properties.

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:

```css theme={null}
: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](/kanso-ui/web/theming/theme-scope.md).

## 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:

```ts theme={null}
import '@kanso-labs/kanso-ui/tokens.css'
```

The tokens are also published as `@kanso-labs/kanso-ui/tokens.json`, the [W3C Design Tokens (DTCG)](https://design-tokens.github.io/community-group/format/) 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](/kanso-ui/core/introduction.md).

## The same theme on React Native

[Kanso UI for React Native](/kanso-ui/react-native/introduction.md) 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()`](https://stylexjs.com/docs/learn/theming/) would take aren't part of the public API yet; [open an issue](https://github.com/kanso-labs/kanso-ui/issues) if you need them exported.

> **[Material Theme Builder](/kanso-ui/web/theming/material-theme-builder.md)**
>
> Generate a whole scheme from one colour.

> **[Part of a page](/kanso-ui/web/theming/theme-scope.md)**
>
> Scope a theme with `ThemeScope`.

> **[Light or dark](/kanso-ui/web/theming/light-and-dark.md)**
>
> Pin a scheme from your own switch.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.