Volt UI Volt UI Svelte
npm Source

Theming

How to set up and use theming in Volt UI Svelte.

Setup

To enable Volt UI theming, you need to:

  1. Import the styles in your application's CSS file:
@import "@epilot/volt-ui-svelte/style.css";

/* Optional: Import the preflight.css file only if you need it */
@import "@epilot/volt-ui-svelte/preflight.css";

Note: The preflight.css file is optional and can be used to reset the browser's default styles. If your application already has preflight styles, you can skip this import.

Color System

Volt UI uses CSS variables for theming and supports both light and dark themes. Colors are automatically adapted based on the theme.

Semantic Colors

The library provides semantic color tokens that adapt to light/dark mode:

  • Accent: Primary brand color (bg-accent-solid, text-accent-contrast)
  • Gray: Neutral grays (bg-gray-level-1, text-gray-default)
  • Error: Error states (bg-error-solid, text-error-contrast)
  • Warning: Warning states (bg-warning-solid)
  • Success: Success states (bg-success-solid)
  • Info: Informational states (bg-info-solid)

Using Semantic Colors

<script>
  import { Button } from "@epilot/volt-ui-svelte"
</script>

<!-- Colors automatically adapt to light/dark theme -->
<Button variant="primary">Primary Button</Button>

Dark Mode

Dark mode is automatically supported when you use semantic color tokens. The theme is determined by:

  • CSS :root selector (defaults to light)
  • .dark or .dark-theme classes
  • [data-theme="dark"] attribute

To enable dark mode, add one of these to your root element:

<!-- Using class -->
<html lang="en" class="dark">

<!-- Using data attribute -->
<html lang="en" data-theme="dark">

Customization

You can customize colors by overriding CSS variables:

:root {
  --accent-9: #your-color;
  --accent-solid: var(--accent-9);
}

Tailwind CSS Integration

Volt UI Svelte is built with Tailwind CSS v4. The components use semantic color classes that automatically respond to theme changes.

Available color utilities include:

  • bg-accent-* - Accent background colors
  • text-accent-* - Accent text colors
  • border-accent-* - Accent border colors
  • bg-gray-* - Gray background colors
  • text-gray-* - Gray text colors