Theming

Setup

To enable volt-ui theming, you need to:

Import the styles in your application's CSS file:

@import "@epilot/volt-ui/style.css";

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

The preflight.css file is optional and can be used to reset the browser's default styles. If your MFE 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

import { Button } from "@epilot/volt-ui"

// 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:

<html lang="en" className="dark">
  {/* or */}
<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);
}