> ## Documentation Index > Fetch the complete documentation index at: https://docs.pharen.app/llms.txt > Use this file to discover all available pages before exploring further. # Styles und Theme > Passe Pharen UI über CSS-Variablen und den klassenbasierten Dark Mode an. Pharen UI verwendet semantische CSS-Variablen. Überschreibe Tokens in deiner globalen CSS-Datei, nachdem du die Paket-Styles importiert hast. ```css theme={null} @import '@pharen/ui/styles.css'; :root { --primary: #158065; --primary-foreground: #ffffff; --background: #ffffff; --foreground: #111111; --border: #e5e5e5; --radius: 0.625rem; } ``` ## Dark mode Die Bibliothek aktiviert Dark Mode über die Klasse `dark`. Setze sie auf `html` oder auf einen umschließenden Bereich. ```html theme={null} ``` ## Wichtige Token-Gruppen | Gruppe | Beispiele | | -------- | ------------------------------------------------------------------ | | Flächen | `--background`, `--card`, `--popover` | | Text | `--foreground`, `--muted-foreground` | | Aktionen | `--primary`, `--secondary`, `--destructive` | | Ränder | `--border`, `--input`, `--ring` | | Form | `--radius` | | Sidebar | `--sidebar-background`, `--sidebar-foreground`, `--sidebar-border` | Überschreibe semantische Tokens statt interner Komponentenklassen. So bleiben Varianten und Dark Mode konsistent.