Skip to content
Alea0.1

Get started

Theming

Every color is a CSS variable that changes with data-theme. Switch the whole page, one area, or bring your own values.

Dark, light and system

Dark is the default. data-theme="light" switches to light, and system follows the operating system.

<html data-theme="dark">   <!-- default -->
<html data-theme="light">
<html data-theme="system"> <!-- follows prefers-color-scheme -->

One area in the other theme

Any element with data-theme gets that theme's values, so a dark card can sit on a light page.

Light card

data-theme="light"

Dark card

data-theme="dark"

Your brand

Pass a brand to ThemeProvider: accent, radius, density and fonts. Strong, subtle and focus colors are mixed from your accent for each theme. Try it:

Accent

1
New

Preview

A link
<ThemeProvider brand={{}}>
  <App />
</ThemeProvider>

Or override the semantic tokens in CSS after the stylesheet. Components only read semantic tokens, so this is enough to rebrand them.

:root, [data-theme='dark'] {
  --alea-accent: #4f8cff;
  --alea-accent-strong: #4f8cff;
  --alea-focus: #4f8cff;
  --alea-gradient-accent-linear: linear-gradient(120deg, #4f8cff, #22d3ee);
}
[data-theme='light'] {
  --alea-accent-strong: #1d4ed8;
  --alea-focus: #1d4ed8;
}

Routing

Give ThemeProvider your router's navigate function. Every link in the kit (Link, Breadcrumbs, menus, Tabs, SidebarLink, NavigationMenu) then navigates on the client instead of reloading the page.

// React Router
const navigate = useNavigate();
<ThemeProvider navigate={navigate} useHref={useHref}>…</ThemeProvider>


// Next.js (app router)
const router = useRouter();
<ThemeProvider navigate={router.push}>…</ThemeProvider>

In JavaScript

import { tokens, cssVar } from '@alea/tokens';


tokens['accent.default'].dark; // '#cd57ff'
cssVar('surface.default');     // 'var(--alea-surface)'