Theming

UiBrium is built from the ground up to be fully customizable. We use CSS Custom Properties (Variables) to provide a flexible and high-performance design system.

Theme Provider

The ThemeProvider is the root of your UiBrium application. It handles theme switching, persistence, and global configuration overrides.

import { ThemeProvider } from '@uibrium/ui';

<ThemeProvider
  defaultMode="system"
  storageKey="uibrium-preference"
  config={{
    radius: '0.75rem',
    cssVariables: {
      '--primary': '250 84% 54%', // HSL format
    },
  }}
>
  <App />
</ThemeProvider>

Standard Palette

We provide a curated set of HSL-based color scales that look stunning in both light and dark modes.

Primary

primary-500

hsl(239 84% 67%)

primary-600

hsl(243 75% 59%)

Secondary

secondary-500

hsl(271 91% 65%)

secondary-600

hsl(271 81% 56%)

Success

success

hsl(142 71% 45%)

info

hsl(199 89% 48%)

Why HSL?

We use HSL values because they make it incredibly easy to programmatically adjust opacity and create harmonious color scales using CSS's color-mix or simple variable manipulation.

Global Overrides

You can override any variable in your global CSS file to create a completely custom brand identity.

:root {
  /* Brand Overrides */
  --primary: 172 66% 50%;
  --primary-foreground: 0 0% 100%;
  
  /* Layout Overrides */
  --radius: 0rem; /* Modern sharp edges */
  --border: 172 66% 90%;
}

.dark {
  --primary: 172 80% 45%;
  --background: 220 20% 10%;
}

Design Tokens

All variables are also exported as TypeScript tokens for use in JS-in-CSS or animation libraries like Framer Motion. Import them from @uibrium/ui/tokens.