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
/* omverse-ui/styles defines tokens like: */
@theme {
--color-primary: #6C47FF;
--color-on-primary: #ffffff;
--color-background: #ffffff;
--color-surface: #F8F8FC;
/* ... and many more */
}

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
@import "tailwindcss";
@import "omverse-ui/styles";
@source "../node_modules/omverse-ui/dist/index.js";
 
/* Override primary color */
:root {
--color-primary: #6366F1;
--color-on-primary: #ffffff;
--color-primary-container: #E0E7FF;
--color-on-primary-container: #3730A3;
}

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
/* Dark mode overrides */
@media (prefers-color-scheme: dark) {
:root {
--color-background: #0A0A0F;
--color-surface: #111118;
}
}

Class-based toggle

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

index.css
tsx
/* 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;
}

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.