Theming & Color Schemes

EOS Hub offers a flexible theming system with dark/light mode and six built-in color schemes. The theme system is built on next-themes and CSS custom properties.

Dark and Light Mode

Users can switch between dark and light mode using the theme toggle in the application header. Three options are available:

• Light -- Light background with dark text
• Dark -- Dark background with light text
• System -- Automatically matches the operating system preference

The preference is stored in a cookie and persists across sessions.

Color Schemes

EOS Hub ships with six color schemes that change the primary, accent, and surface colors throughout the application:

Scheme	Primary Color	Description
Default	Blue	Professional blue tones, the standard look
Rose	Pink/Rose	Warm, energetic feel
Lavender	Purple	Calm, creative atmosphere
Mint	Green	Fresh, natural aesthetic
Peach	Orange	Friendly, approachable warmth
Sky	Light Blue	Clean, airy appearance

Users can switch color schemes from the settings menu. The selection is stored per user in the browser.

How It Works

CSS Custom Properties

All colors in EOS Hub are defined as CSS custom properties (CSS variables) in HSL format. The color scheme class on the root element determines which set of values is active:

: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%;
  --accent: 210 40% 96.1%;
  --muted: 210 40% 96.1%;
  --border: 214.3 31.8% 91.4%;
  --ring: 221.2 83.2% 53.3%;
  /* ... more variables */
}

.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  --primary: 217.2 91.2% 59.8%;
  /* ... dark mode overrides */
}

Each color scheme overrides these variables:

[data-color-scheme="rose"] {
  --primary: 346.8 77.2% 49.8%;
  --primary-foreground: 355.7 100% 97.3%;
  --accent: 346.8 77.2% 49.8%;
  /* ... */
}

[data-color-scheme="rose"].dark {
  --primary: 346.8 77.2% 49.8%;
  /* ... dark mode rose overrides */
}

shadcn/ui Integration

EOS Hub uses shadcn/ui components, which consume these CSS variables natively. When the color scheme changes, every component -- buttons, cards, dialogs, tables -- updates automatically.

Creating a Custom Color Scheme

To add a new color scheme:

1. Define the CSS Variables

Add a new [data-color-scheme] block to your global CSS file:

[data-color-scheme="ocean"] {
  --background: 200 20% 98%;
  --foreground: 200 50% 10%;
  --primary: 200 80% 45%;
  --primary-foreground: 200 20% 98%;
  --secondary: 200 20% 94%;
  --secondary-foreground: 200 50% 10%;
  --accent: 180 60% 45%;
  --accent-foreground: 180 20% 98%;
  --muted: 200 20% 94%;
  --muted-foreground: 200 30% 40%;
  --border: 200 20% 88%;
  --ring: 200 80% 45%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;
  --card: 200 20% 100%;
  --card-foreground: 200 50% 10%;
  --popover: 200 20% 100%;
  --popover-foreground: 200 50% 10%;
}

[data-color-scheme="ocean"].dark {
  --background: 200 50% 6%;
  --foreground: 200 20% 94%;
  --primary: 200 80% 55%;
  /* ... dark overrides */
}

2. Register the Scheme

Add the new scheme to the color scheme selector component so users can choose it. Update the color schemes array:

export const colorSchemes = [
  { name: 'default', label: 'Default' },
  { name: 'rose', label: 'Rose' },
  { name: 'lavender', label: 'Lavender' },
  { name: 'mint', label: 'Mint' },
  { name: 'peach', label: 'Peach' },
  { name: 'sky', label: 'Sky' },
  { name: 'ocean', label: 'Ocean' }, // new
] as const;

3. Test Both Modes

Verify the new scheme looks good in both light and dark mode. Pay special attention to:

• Text contrast against backgrounds (WCAG AA minimum)
• Button states (hover, active, disabled)
• Form inputs and borders
• Chart colors in the dashboard

TIP

Use a tool like the WebAIM Contrast Checker to verify that your color combinations meet accessibility standards.

Customizing the Default Theme

If you want to change the default colors without adding a new scheme, edit the :root and .dark CSS variable blocks in the global stylesheet. All components will update automatically.

Next Steps

• Internationalization -- Multi-language support
• Dashboard -- See theming in action
• Configuration -- Full configuration reference