Theme & tokens
Every visual value in Joy runs through CSS custom properties. Override a token after loading joy-tokens.css and the whole system — buttons, cards, dock, modal — picks up the change.
Color
To use your own brand color, override the accent tokens. Anything using var(--joy-accent) — solid buttons, active links, the selected dock item, input focus rings — updates with it:
:root {
--joy-accent: #6d28d9;
--joy-accent-hover: #5b21b6;
--joy-accent-glow: rgba(109, 40, 217, 0.35);
--joy-accent-soft: rgba(109, 40, 217, 0.1);
}This block needs to load after the joy-tokens.css <link> in your <head> order (or in any CSS loaded after it) — otherwise the original token wins.
Spacing scale
| Token | Value |
|---|---|
--joy-space-1 | 4px |
--joy-space-2 | 8px |
--joy-space-3 | 12px |
--joy-space-4 | 16px |
--joy-space-5 | 24px |
--joy-space-6 | 32px |
--joy-space-7 | 48px |
--joy-space-8 | 64px |
Border radius
| Token | Value |
|---|---|
--joy-radius-sm | 14px |
--joy-radius-md | 20px |
--joy-radius-lg | 28px |
--joy-radius-xl | 40px |
--joy-radius-pill | 999px |
Easing
| Token | Value | Used for |
|---|---|---|
--joy-ease | cubic-bezier(0.25, 0.8, 0.25, 1) | Default transitions |
--joy-ease-bounce | cubic-bezier(0.175, 0.885, 0.32, 1.275) | Hover/click bounce (buttons, dock) |
Dark mode
joy-dark.css is a second stylesheet, always loaded but disabled by default. It redefines the same color/glass variables and never touches layout, so turning it on never changes structure — just the values those tokens already hold.
| Action | How |
|---|---|
| Toggle | window.JoyTheme.toggle() — or click a button with id="joy-theme-toggle", which joy.js wires up on its own |
| Force a theme | window.JoyTheme.apply('dark') or .apply('light') |
| Persistence | saved to localStorage['selectedTheme'], read automatically on the next visit |
| No saved choice | falls back to the OS prefers-color-scheme |
Font
Everything uses --joy-font: 'Poppins', sans-serif;. To swap it, override the token and load whichever font you prefer instead of the Google Fonts link (see Getting started).