Theming

ASH UI includes a built-in theme system with dark mode support, localStorage persistence, and automatic system preference detection.

ThemeProvider

Wrap your app with the ThemeProvider to enable theme switching:

app.tsx

import { ThemeProvider } from '@ash-cloud/ash-ui';

function App() {
  return (
    <ThemeProvider
      defaultTheme="dark"
      storageKey="my-app-theme"
      listenToSystemChanges={true}
    >
      {children}
    </ThemeProvider>
  );
}

Prop	Type	Default	Description
defaultTheme	'light' \| 'dark'	'dark'	Initial theme if no stored preference
storageKey	string	'ash-theme'	localStorage key for persistence
listenToSystemChanges	boolean	true	React to OS theme changes

useTheme Hook

Access and control the theme from any component:

ThemeToggle.tsx

import { useTheme } from '@ash-cloud/ash-ui';

function ThemeToggle() {
  const { theme, setTheme, systemTheme } = useTheme();

  return (
    <div className="flex gap-2">
      <button
        onClick={() => setTheme('light')}
        className={theme === 'light' ? 'active' : ''}
      >
        <SunIcon />
      </button>
      <button
        onClick={() => setTheme('dark')}
        className={theme === 'dark' ? 'active' : ''}
      >
        <MoonIcon />
      </button>
    </div>
  );
}

Hook Return Values

themeCurrent theme value ('light' | 'dark')
setThemeFunction to update the theme
systemThemeCurrent OS preference ('light' | 'dark')

Interactive Demo

Selected: dark

Color Palette

ASH UI uses a carefully crafted dark-mode-first color palette:

Accent Colors

Accent

#ccff00

Accent 500

#b8e600

Surface Colors

Surface Dark

#0a0a0a

Surface Card

#0c0c0c

Surface Elevated

#111111

Status Colors

Success

#22c55e

Warning

#eab308

Error

#ef4444

Info

#3b82f6

Text Colors

Primary

#ffffff

Secondary

rgba(255,255,255,0.6)

Muted

rgba(255,255,255,0.4)

CSS Variables

Customize the theme by overriding CSS variables:

globals.css

:root {
  --ash-accent: #ccff00;
  --ash-accent-foreground: #000000;
  --ash-surface-dark: #0a0a0a;
  --ash-surface-card: #0c0c0c;
  --ash-surface-elevated: #111111;
  --ash-border: rgba(255, 255, 255, 0.1);
  --ash-border-hover: rgba(255, 255, 255, 0.2);
}

/* Custom accent color example */
:root {
  --ash-accent: #6366f1; /* Indigo */
}

Glassmorphism Classes

ASH UI includes utility classes for glassmorphism effects:

.glass-panel

Basic frosted glass effect

.glass-panel-hover

With hover interactions

.card-glass

Card with subtle border

.card-glow

Card with accent glow