Theme Configuration

Customize your dashboard theme using CSS variables

Click any theme to preview it live. Your choice is automatically saved and will persist across sessions.

These swatches update automatically based on your selected theme.

Primary

--primary

Secondary

--secondary

Muted

--muted

Accent

--accent

Destructive

--destructive

Border

--border

Cleopatra uses CSS variables for theming. Customize your theme by editing src/styles/theme.css

--primary

--secondary

--destructive

--success

--warning

--info

Toggle dark mode using the theme switcher in the navbar. The mode is saved to localStorage and persists across sessions.

Your theme preference is automatically saved to localStorage under the keys cleopatra-theme and cleopatra-mode.