DocsTheming

Theming

omverse-ui uses CSS custom properties for all design tokens. Override them to match your brand.

How it works

All omverse-ui styles are built on CSS custom properties (variables) declared inside a @theme block via omverse-ui/styles. This means every color, radius, and spacing value is a single CSS variable you can override anywhere in your own stylesheet — no build step, no config file, no re-compilation required.

Tailwind v4 reads these tokens automatically via @theme, making them available as utility classes too (e.g. bg-primary, text-on-primary).

omverse-ui/styles (excerpt)

tsx

1/* omverse-ui/styles defines tokens like: */
2@theme {
3  --color-primary: #6C47FF;
4  --color-on-primary: #ffffff;
5  --color-background: #ffffff;
6  --color-surface: #F8F8FC;
7  /* ... and many more */
8}

Overriding design tokens

After importing omverse-ui/styles, add a :root block in the same file and set any tokens you want to change. Your values win due to CSS cascade order.

Always place overrides after the omverse-ui import so the cascade applies correctly.

index.css

tsx

1@import "tailwindcss";
2@import "omverse-ui/styles";
3@source "../node_modules/omverse-ui/dist/index.js";
4 
5/* Override primary color */
6:root {
7  --color-primary: #6366F1;
8  --color-on-primary: #ffffff;
9  --color-primary-container: #E0E7FF;
10  --color-on-primary-container: #3730A3;
11}

Dark mode

omverse-ui ships with a light theme by default. You can enable dark mode via the standard CSS media query or a class-based toggle — whichever matches your app's approach.

Media query (system preference)

index.css

tsx

1/* Dark mode overrides */
2@media (prefers-color-scheme: dark) {
3  :root {
4    --color-background: #0A0A0F;
5    --color-surface: #111118;
6  }
7}

Class-based toggle

If you manage dark mode with a .dark class on <html>, scope your overrides to that class instead.

index.css

tsx

1/* Class-based dark mode (e.g. when you toggle .dark on <html>) */
dark {
--color-background: #0A0A0F;
--color-surface: #111118;
--color-text-primary: #F1F5F9;
--color-text-secondary: #94A3B8;
7}

Tips

See the Design tokens page for a full list of every available token.
Tokens prefixed --color-on-* are foreground colors designed for legibility on top of their background counterpart.
Radius and spacing tokens (--radius-*) follow the same override pattern.