Guides

Theming

oks-ui has no theme provider, no config object, and no runtime JS for styling — everything is a CSS custom property. This page's own accent color is a real example: it's set to var(--oks-color-primary-500) directly, not a separate brand color.

Token files

Import	Contents
`oks-ui/tokens.css`	Palettes, semantic color roles, spacing, radii.
`oks-ui/utilities.css`	Prefixed utility classes (.oks-*).
`oks-ui/theme.css`	Currently the same as tokens.css.
`oks-ui/styles.css`	Imports tokens + utilities + component styles (recommended).

Override a token

Every color, space, and radius is a real CSS custom property — override it from your own app CSS, no build step or config file needed.

:root {
  --oks-color-primary-500: #7c3aed;
  --oks-space-4: 18px;
}

Add a semantic role

Semantic roles (primary, secondary, danger, …) are just aliases onto a palette — point one at any built-in palette (slate, gray, zinc, neutral, stone, red, orange, amber, and more) or your own scale.

:root {
  --oks-color-secondary-500: var(--oks-palette-slate-500);
}

Prefixed utilities

An opt-in .oks-* utility layer for rapid prototyping alongside components, without leaving your component files.

.oks-p-4
.oks-px-6
.oks-pt-2

.oks-rounded-lg
.oks-bg-primary-500
.oks-text-slate-900

Live example

This site's own header logo, links, and the buttons below all read --oks-color-primary-* directly — theming the library themes the site.