# Theme
Udixio's theme system generates a complete set of color and typography tokens from a single source color. Drop in `ThemeProvider`, call `defineConfig`, and every component on your page adapts automatically.
## Installation
```bash
npm install @udixio/ui-react @udixio/theme @udixio/tailwind
```
`@udixio/ui-react` re-exports the theming API you use in app code — `defineConfig`, `ThemeProvider` — so you rarely import from `@udixio/theme` directly. You still install it: it carries the generator that turns your config into CSS, which you wire into your build (`vitePlugin` and friends). See [Get started — React](/get-started/react) for the full build setup this page assumes.
## Quick setup
```tsx
// theme.config.ts
import { defineConfig } from '@udixio/ui-react';
export const themeConfig = defineConfig({
sourceColor: '#6750A4',
darkMode: 'class',
darkSelector: '.dark',
});
```
```tsx
// App.tsx (or your root layout)
import { ThemeProvider } from '@udixio/ui-react';
import { themeConfig } from './theme.config';
export default function App() {
return (
{/* rest of your app */}
);
}
```
That's it. Every element inside `.dynamic` now inherits live color variables. Removing `.dark` switches to light mode.
## What `ThemeProvider` does
`ThemeProvider` renders a single `