Themes

Customize the look and feel of your application with built-in themes, colors, and dark mode support.

Available Themes

Volt UI comes with several pre-built color themes. Each theme provides a unique palette for primary, secondary, accent, and semantic colors.

Volt

Default blue theme

Ember

Warm orange theme

Sage

Natural green theme

Dusk

Purple twilight theme

Glacier

Cool cyan theme

Theme Setup

Add the theme provider to your application configuration:

import { provideVoltTheme } from 'volt'; export const appConfig: ApplicationConfig = { providers: [ provideVoltTheme({ color: 'volt', style: 'soft', dark: false }) ] };

Color Options

Theme Colors

Choose your primary color palette

'volt' - Blue (default)
'ember' - Orange/Red
'sage' - Green
'dusk' - Purple
'glacier' - Cyan

Style Variants

Choose your component style

'soft' - Rounded corners (default)
'sharp' - Square corners
'brutal' - Heavy borders
'ghost' - Minimal borders
'retro' - Classic look

Dark Mode

Volt UI supports dark mode out of the box. Enable it in your theme configuration or toggle it dynamically.

// Enable dark mode by default

provideVoltTheme({ color: 'volt', dark: true })

// Or toggle dynamically

import { applyVoltTheme } from 'volt';

applyVoltTheme({ dark: true });

CSS Variables

Volt UI uses CSS variables for theming. You can customize them in your global styles

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 221.2 83.2% 53.3%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 221.2 83.2% 53.3%;
  --radius: 0.5rem;
}