Theming

Change the look of an app through tokens rather than stylesheets.

Every colour, radius and spacing value in this template comes from a token. There is no stylesheet to edit and no utility class to apply.

The config

src/resources/once-ui.config.js is the single place a project's visual identity is set. It is read by Providers and applied through ThemeProvider.

Js

const style = {
  theme: "system",
  brand: "blue",
  accent: "indigo",
  neutral: "gray",
  solid: "contrast",
  solidStyle: "flat",
  border: "playful",
  surface: "translucent",
  transition: "all",
  scaling: "100",
};

Change brand and the entire app follows — buttons, links, focus rings, chart series. Nothing else has to be touched.

Spacing and colour in components

Use props, not styles. Layout primitives take spacing tokens directly:

Tsx

<Column fillWidth gap="24" padding="l" background="surface" radius="l" border>
  <Text variant="heading-strong-m">Title</Text>
  <Text variant="body-default-s" onBackground="neutral-weak">
    Supporting copy.
  </Text>
</Column>

gap, padding, marginTop and friends take spacing tokens. background, onBackground and border take colour tokens of the form scheme-weight, for example neutral-alpha-weak or brand-medium.

Dark mode

theme: "system" follows the operating system. Because colours are tokens rather than literals, no component needs a dark variant — the token values change and the tree re-renders with them.

When a token does not fit

If a requirement cannot be expressed with tokens, that is a signal about the requirement or a gap in the design system. Reaching for an inline style resolves one screen and breaks the guarantee for every other one. Raise the gap instead.

Last updated August 27, 2026

Edit this page on GitHub