# Chroma Themes

A curated collection of CSS variable theme palettes adapted from popular color schemes. Each theme provides a standardized set of CSS custom properties for backgrounds, text, surfaces, overlays, accents, and semantic colors, along with component tokens for common UI elements.

## Available Themes

### Catppuccin

| Theme | Mode | Description |
|-------|------|-------------|
| [catppuccin-frappe](catppuccin-frappe/) | Dark | A soft, muted dark color scheme |
| [catppuccin-latte](catppuccin-latte/) | Light | A light, warm color scheme |
| [catppuccin-macchiato](catppuccin-macchiato/) | Dark | A rich, deep dark color scheme |
| [catppuccin-mocha](catppuccin-mocha/) | Dark | The darkest, richest Catppuccin flavor |

### Dracula

| Theme | Mode | Description |
|-------|------|-------------|
| [dracula](dracula/) | Dark | A dark theme with vibrant accent colors |
| [alucard](alucard/) | Light | The light counterpart to Dracula with warm parchment tones |

### Edge

| Theme | Mode | Description |
|-------|------|-------------|
| [edge-dark](edge-dark/) | Dark | Clean and elegant color scheme with neutral tones |
| [edge-dark-aura](edge-dark-aura/) | Dark | Clean and elegant color scheme with a blue-purple tint |
| [edge-dark-aura-dim](edge-dark-aura-dim/) | Dark | Clean and elegant color scheme with muted blue-purple tones |
| [edge-dark-neon](edge-dark-neon/) | Dark | Clean and elegant color scheme with a deep blue-purple tint |
| [edge-light](edge-light/) | Light | Clean and elegant color scheme on a bright canvas |

### Everforest

| Theme | Mode | Description |
|-------|------|-------------|
| [everforest-dark](everforest-dark/) | Dark | A green based warm color scheme inspired by nature |
| [everforest-light](everforest-light/) | Light | A green based warm color scheme inspired by nature on a light canvas |

### Gruvbox

| Theme | Mode | Description |
|-------|------|-------------|
| [gruvbox-dark](gruvbox-dark/) | Dark | Retro groove color scheme with warm earthy tones |
| [gruvbox-light](gruvbox-light/) | Light | Retro groove color scheme with warm earthy tones on a light canvas |

### Nord

| Theme | Mode | Description |
|-------|------|-------------|
| [nord](nord/) | Dark | An arctic, north-bluish dark color palette for clean and uncluttered design |
| [nord-light](nord-light/) | Light | An arctic, north-bluish light color palette for bright and airy design |

### Rose Pine

| Theme | Mode | Description |
|-------|------|-------------|
| [rose-pine](rose-pine/) | Dark | All natural pine, faux fur, and a bit of soho vibes for the classy minimalist |
| [rose-pine-dawn](rose-pine-dawn/) | Light | A light variant for sunny day coding |
| [rose-pine-moon](rose-pine-moon/) | Dark | A dimmed variant with a cooler base for late night sessions |

### Sonokai

| Theme | Mode | Description |
|-------|------|-------------|
| [sonokai](sonokai/) | Dark | High contrast Monokai Pro inspired color scheme |
| [sonokai-andromeda](sonokai-andromeda/) | Dark | Deep blue-tinted Monokai Pro inspired variant |
| [sonokai-atlantis](sonokai-atlantis/) | Dark | Cool ocean-tinted Monokai Pro inspired variant |
| [sonokai-espresso](sonokai-espresso/) | Dark | Warm coffee-tinted Monokai Pro inspired variant |
| [sonokai-maia](sonokai-maia/) | Dark | Cool teal-tinted Monokai Pro inspired variant |
| [sonokai-shusia](sonokai-shusia/) | Dark | Warm purple-tinted Monokai Pro inspired variant |

### Tokyo Night

| Theme | Mode | Description |
|-------|------|-------------|
| [tokyonight-day](tokyonight-day/) | Light | A clean light theme with vivid accents |
| [tokyonight-moon](tokyonight-moon/) | Dark | A clean dark theme with brighter, more saturated accents |
| [tokyonight-night](tokyonight-night/) | Dark | The darkest variant with deep blue-black backgrounds |
| [tokyonight-storm](tokyonight-storm/) | Dark | A clean dark theme with a slightly lighter blue-tinted background |

## Theme Structure

Each theme is a directory containing two files:

```
theme-name/
  manifest.yaml   # Theme metadata, mode, tags, and color variable definitions
  styles.css       # CSS custom properties ready to load in a browser
```

### manifest.yaml

The manifest defines theme metadata and the 26 base color values:

```yaml
name: "Theme Name"
packageName: "theme-name"
version: "1.0.0"
description: "Short description of the theme"
author: "Author Name"
copyright: "Copyright notice"
license: "MIT"
source: "https://github.com/example/theme"  # URL to original color scheme
mode: "dark"            # "dark" or "light"
tags:                   # Searchable metadata tags
  - collection-name
  - warm
  - vibrant
variables:              # 26 base color definitions
  base: "#1e1e2e"
  mantle: "#181825"
  crust: "#11111b"
  text: "#cdd6f4"
  # ... (see Variable Reference below)
```

### styles.css

The CSS file defines all custom properties under `:root`. It includes the 26 base color variables from the manifest, plus semantic aliases, component tokens, interactive tokens, and derived UI tokens:

```css
:root {
  /* Base Colors (from manifest) */
  --theme-base: #1e1e2e;
  --theme-text: #cdd6f4;
  /* ... */

  /* Semantic Aliases */
  --theme-bg: var(--theme-base);
  --theme-accent: var(--theme-blue);
  /* ... */

  /* Component Tokens */
  --theme-card-bg: var(--theme-surface0);
  --theme-nav-bg: var(--theme-mantle);
  /* ... */

  /* Typography */
  --theme-font-family: 'Inter', ...;
  --theme-font-mono: 'JetBrains Mono', ...;

  /* Spacing and Radius */
  --theme-radius-sm: 4px;
  --theme-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
  /* ... */

  /* Interactive Tokens */
  --theme-link-color: var(--theme-accent);
  --theme-focus-ring-color: color-mix(in srgb, var(--theme-accent) 40%, transparent);
  /* ... */

  /* Button, Table, Dropdown, Modal, Tooltip, Code Tokens */
  --theme-btn-primary-bg: var(--theme-accent);
  --theme-table-header-bg: var(--theme-surface0);
  --theme-dropdown-bg: var(--theme-card-bg);
  --theme-modal-bg: var(--theme-card-bg);
  /* ... */

  /* State Subtle Borders/Text, Accent Variants, Badge, Breadcrumb,
     List Group, Pagination, Progress, Toast, Popover, Offcanvas,
     Accordion, Nav Tab/Pill, Form, Heading, Spinner, Carousel,
     Scrollbar, Disabled State Tokens */
  --theme-success-border-subtle: color-mix(in srgb, var(--theme-green) 25%, var(--theme-base));
  --theme-accordion-active-bg: var(--theme-accent-bg-subtle);
  --theme-input-focus-border: var(--theme-accent);
  /* ... */
}
```

## Usage

### Loading a Theme

Include the theme's `styles.css` file to apply its CSS custom properties:

```html
<link rel="stylesheet" href="themes/catppuccin-mocha/styles.css">
```

Or import it in your stylesheet:

```css
@import url('themes/catppuccin-mocha/styles.css');
```

### Using Variables in Your CSS

Reference the theme variables anywhere in your styles:

```css
body {
  background-color: var(--theme-bg);
  color: var(--theme-text);
  font-family: var(--theme-font-family);
}

.card {
  background: var(--theme-card-bg);
  border: 1px solid var(--theme-card-border);
  border-radius: var(--theme-radius-md);
  box-shadow: var(--theme-shadow-sm);
}

.button-primary {
  background: var(--theme-accent);
  color: var(--theme-base);
}

.alert-error {
  color: var(--theme-error);
}
```

### Switching Themes at Runtime

Swap themes dynamically by replacing the stylesheet:

```javascript
function setTheme(themeName) {
  const link = document.getElementById('theme-stylesheet');
  link.href = `themes/${themeName}/styles.css`;
}
```

### Reading the Manifest Programmatically

Parse `manifest.yaml` to build theme pickers, filter by mode or tags, or generate CSS from the variable definitions:

```javascript
import yaml from 'js-yaml';

const manifest = yaml.load(await fetch('themes/nord/manifest.yaml').then(r => r.text()));

console.log(manifest.name);       // "Nord"
console.log(manifest.mode);       // "dark"
console.log(manifest.tags);       // ["nord", "cool", "arctic", "minimal"]
console.log(manifest.variables);  // { base: "#2e3440", text: "#d8dee9", ... }
```

## Variable Reference

### Base Colors (26 variables)

These map from `manifest.yaml` variables to `--theme-*` CSS properties.

| Variable | CSS Property | Role |
|----------|-------------|------|
| `base` | `--theme-base` | Primary background |
| `mantle` | `--theme-mantle` | Secondary background (sidebars, panels) |
| `crust` | `--theme-crust` | Tertiary background (deepest layer) |
| `text` | `--theme-text` | Primary text color |
| `subtext0` | `--theme-subtext0` | Muted text |
| `subtext1` | `--theme-subtext1` | Secondary text |
| `surface0` | `--theme-surface0` | Elevated surface (cards, inputs) |
| `surface1` | `--theme-surface1` | Higher elevation surface |
| `surface2` | `--theme-surface2` | Highest elevation surface |
| `overlay0` | `--theme-overlay0` | Overlay / disabled state |
| `overlay1` | `--theme-overlay1` | Secondary overlay |
| `overlay2` | `--theme-overlay2` | Tertiary overlay |
| `blue` | `--theme-blue` | Blue accent |
| `lavender` | `--theme-lavender` | Lavender accent |
| `sapphire` | `--theme-sapphire` | Sapphire accent |
| `sky` | `--theme-sky` | Sky accent |
| `teal` | `--theme-teal` | Teal accent |
| `green` | `--theme-green` | Green accent |
| `yellow` | `--theme-yellow` | Yellow accent |
| `peach` | `--theme-peach` | Peach / orange accent |
| `maroon` | `--theme-maroon` | Maroon accent |
| `red` | `--theme-red` | Red accent |
| `mauve` | `--theme-mauve` | Mauve / purple accent |
| `pink` | `--theme-pink` | Pink accent |
| `flamingo` | `--theme-flamingo` | Flamingo accent |
| `rosewater` | `--theme-rosewater` | Rosewater accent |

### Semantic Aliases (10 variables)

Higher-level tokens that reference base colors. Override these per-theme to change which base color fills each role.

| CSS Property | Default Reference | Purpose |
|-------------|-------------------|---------|
| `--theme-bg` | `--theme-base` | Page background |
| `--theme-bg-secondary` | `--theme-mantle` | Secondary background |
| `--theme-bg-tertiary` | `--theme-crust` | Tertiary background |
| `--theme-text-muted` | `--theme-subtext0` | De-emphasized text |
| `--theme-border` | `--theme-surface0` | Default border color |
| `--theme-accent` | `--theme-blue` | Primary accent color |
| `--theme-success` | `--theme-green` | Success state |
| `--theme-warning` | `--theme-yellow` | Warning state |
| `--theme-error` | `--theme-red` | Error state |
| `--theme-info` | `--theme-sapphire` | Informational state |

### Component Tokens (8 variables)

UI component defaults. Dark themes typically reference surface variables; light themes often use hardcoded white values for card elevation.

| CSS Property | Purpose |
|-------------|---------|
| `--theme-card-bg` | Card background |
| `--theme-card-border` | Card border |
| `--theme-input-bg` | Input field background |
| `--theme-input-border` | Input field border |
| `--theme-nav-bg` | Navigation bar background |
| `--theme-sidebar-bg` | Sidebar background |
| `--theme-widget-bg` | Widget / panel background |
| `--theme-widget-border` | Widget / panel border |

### Typography (2 variables)

| CSS Property | Default Value |
|-------------|---------------|
| `--theme-font-family` | `'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif` |
| `--theme-font-mono` | `'JetBrains Mono', 'Fira Code', monospace` |

### Spacing and Radius (6 variables)

| CSS Property | Dark Default | Light Default |
|-------------|-------------|---------------|
| `--theme-radius-sm` | `4px` | `4px` |
| `--theme-radius-md` | `8px` | `8px` |
| `--theme-radius-lg` | `12px` | `12px` |
| `--theme-shadow-sm` | `0 1px 2px rgba(0,0,0,0.25)` | `0 1px 2px rgba(0,0,0,0.05)` |
| `--theme-shadow-md` | `0 4px 6px rgba(0,0,0,0.3)` | `0 4px 6px rgba(0,0,0,0.1)` |
| `--theme-shadow-lg` | `0 10px 15px rgba(0,0,0,0.4)` | `0 10px 15px rgba(0,0,0,0.15)` |

### Interactive Tokens (4 variables)

| CSS Property | Default Reference | Purpose |
|-------------|-------------------|---------|
| `--theme-link-color` | `--theme-accent` | Link text color |
| `--theme-link-hover-color` | `--theme-lavender` | Link hover text color |
| `--theme-focus-ring-color` | `color-mix(in srgb, accent 40%, transparent)` | Focus ring outline color |
| `--theme-hover-bg` | `--theme-surface1` | Generic hover background |

### Button Tokens (12 variables)

| CSS Property | Default Reference | Purpose |
|-------------|-------------------|---------|
| `--theme-btn-primary-bg` | `--theme-accent` | Primary button background |
| `--theme-btn-primary-text` | `--theme-base` | Primary button text color |
| `--theme-btn-secondary-bg` | `--theme-surface1` | Secondary button background |
| `--theme-btn-secondary-text` | `--theme-text` | Secondary button text color |
| `--theme-btn-danger-bg` | `--theme-red` | Danger button background |
| `--theme-btn-danger-text` | `--theme-base` | Danger button text color |
| `--theme-btn-success-bg` | `--theme-green` | Success button background |
| `--theme-btn-success-text` | `--theme-base` | Success button text color |
| `--theme-btn-warning-bg` | `--theme-yellow` | Warning button background |
| `--theme-btn-warning-text` | `color-mix(yellow 25%, black)` | Warning button text color (always dark for contrast) |
| `--theme-btn-info-bg` | `--theme-sapphire` | Info button background |
| `--theme-btn-info-text` | `--theme-base` | Info button text color |

### State Subtle Backgrounds (4 variables)

Lightly tinted backgrounds for alerts, badges, and inline status indicators. Each mixes its semantic color at 15% over the page background.

| CSS Property | Default Reference | Purpose |
|-------------|-------------------|---------|
| `--theme-success-bg-subtle` | `color-mix(green 15%, base)` | Success alert / badge background |
| `--theme-warning-bg-subtle` | `color-mix(yellow 15%, base)` | Warning alert / badge background |
| `--theme-error-bg-subtle` | `color-mix(red 15%, base)` | Error alert / badge background |
| `--theme-info-bg-subtle` | `color-mix(sapphire 15%, base)` | Info alert / badge background |

### Table Tokens (5 variables)

| CSS Property | Default Reference | Purpose |
|-------------|-------------------|---------|
| `--theme-table-bg` | `--theme-base` | Table background |
| `--theme-table-border` | `--theme-surface1` | Table cell borders |
| `--theme-table-header-bg` | `--theme-surface0` | Table header row background |
| `--theme-table-stripe-bg` | `color-mix(overlay0 4%, base)` | Striped row background |
| `--theme-table-hover-bg` | `color-mix(overlay0 8%, base)` | Row hover background |

### Dropdown Tokens (3 variables)

| CSS Property | Default Reference | Purpose |
|-------------|-------------------|---------|
| `--theme-dropdown-bg` | `--theme-card-bg` | Dropdown menu background |
| `--theme-dropdown-border` | `--theme-card-border` | Dropdown menu border |
| `--theme-dropdown-hover-bg` | `--theme-hover-bg` | Dropdown item hover background |

### Modal Tokens (3 variables)

| CSS Property | Default Reference | Purpose |
|-------------|-------------------|---------|
| `--theme-modal-bg` | `--theme-card-bg` | Modal content background |
| `--theme-modal-border` | `--theme-card-border` | Modal content border |
| `--theme-backdrop-bg` | `rgba(0, 0, 0, 0.5)` | Modal backdrop overlay |

### Tooltip Tokens (2 variables)

| CSS Property | Default Reference | Purpose |
|-------------|-------------------|---------|
| `--theme-tooltip-bg` | `--theme-overlay2` | Tooltip background |
| `--theme-tooltip-text` | `--theme-base` | Tooltip text color |

### Code Tokens (2 variables)

| CSS Property | Default Reference | Purpose |
|-------------|-------------------|---------|
| `--theme-code-bg` | `--theme-surface0` | Inline code background |
| `--theme-code-text` | `--theme-pink` | Inline code text color |

### Emphasis and Utility (2 variables)

| CSS Property | Default Reference | Purpose |
|-------------|-------------------|---------|
| `--theme-emphasis-color` | `--theme-text` | High-emphasis text (headings, bold) |
| `--theme-border-translucent` | `color-mix(border 60%, transparent)` | Semi-transparent border for layered surfaces |

### State Subtle Borders (4 variables)

Lightly tinted borders for alerts, badges, and status containers. Each mixes its semantic color at 25% over the page background.

| CSS Property | Default Reference | Purpose |
|-------------|-------------------|---------|
| `--theme-success-border-subtle` | `color-mix(green 25%, base)` | Success alert / badge border |
| `--theme-warning-border-subtle` | `color-mix(yellow 25%, base)` | Warning alert / badge border |
| `--theme-error-border-subtle` | `color-mix(red 25%, base)` | Error alert / badge border |
| `--theme-info-border-subtle` | `color-mix(sapphire 25%, base)` | Info alert / badge border |

### State Text Emphasis (4 variables)

Text colors for semantic state labels, alert text, and badge text.

| CSS Property | Default Reference | Purpose |
|-------------|-------------------|---------|
| `--theme-success-text` | `--theme-green` | Success state text |
| `--theme-warning-text` | `--theme-yellow` | Warning state text |
| `--theme-error-text` | `--theme-red` | Error state text |
| `--theme-info-text` | `--theme-sapphire` | Info state text |

### Accent/Primary Variants (3 variables)

Subtle background, border, and text tokens for the primary accent color, matching the pattern used by state colors.

| CSS Property | Default Reference | Purpose |
|-------------|-------------------|---------|
| `--theme-accent-bg-subtle` | `color-mix(accent 15%, base)` | Subtle accent background |
| `--theme-accent-border-subtle` | `color-mix(accent 25%, base)` | Subtle accent border |
| `--theme-accent-text` | `--theme-accent` | Accent text emphasis |

### Badge Tokens (2 variables)

| CSS Property | Default Reference | Purpose |
|-------------|-------------------|---------|
| `--theme-badge-bg` | `--theme-accent` | Badge background |
| `--theme-badge-text` | `--theme-base` | Badge text color |

### Breadcrumb Tokens (3 variables)

| CSS Property | Default Reference | Purpose |
|-------------|-------------------|---------|
| `--theme-breadcrumb-color` | `--theme-text-muted` | Breadcrumb link color |
| `--theme-breadcrumb-active-color` | `--theme-text` | Active breadcrumb item color |
| `--theme-breadcrumb-divider-color` | `--theme-overlay1` | Breadcrumb divider/separator color |

### List Group Tokens (5 variables)

| CSS Property | Default Reference | Purpose |
|-------------|-------------------|---------|
| `--theme-list-group-bg` | `--theme-card-bg` | List group item background |
| `--theme-list-group-border` | `--theme-card-border` | List group item border |
| `--theme-list-group-hover-bg` | `--theme-hover-bg` | List group item hover background |
| `--theme-list-group-active-bg` | `--theme-accent` | Active list group item background |
| `--theme-list-group-active-text` | `--theme-base` | Active list group item text color |

### Pagination Tokens (5 variables)

| CSS Property | Default Reference | Purpose |
|-------------|-------------------|---------|
| `--theme-pagination-bg` | `--theme-card-bg` | Pagination item background |
| `--theme-pagination-border` | `--theme-card-border` | Pagination item border |
| `--theme-pagination-active-bg` | `--theme-accent` | Active page background |
| `--theme-pagination-active-text` | `--theme-base` | Active page text color |
| `--theme-pagination-disabled-color` | `--theme-overlay0` | Disabled page text color |

### Progress Bar Tokens (2 variables)

| CSS Property | Default Reference | Purpose |
|-------------|-------------------|---------|
| `--theme-progress-bg` | `--theme-surface0` | Progress track background |
| `--theme-progress-bar-bg` | `--theme-accent` | Progress bar fill color |

### Toast Tokens (3 variables)

| CSS Property | Default Reference | Purpose |
|-------------|-------------------|---------|
| `--theme-toast-bg` | `--theme-card-bg` | Toast background |
| `--theme-toast-border` | `--theme-card-border` | Toast border |
| `--theme-toast-header-bg` | `color-mix(surface0 80%, card-bg)` | Toast header background |

### Popover Tokens (3 variables)

| CSS Property | Default Reference | Purpose |
|-------------|-------------------|---------|
| `--theme-popover-bg` | `--theme-card-bg` | Popover background |
| `--theme-popover-border` | `--theme-card-border` | Popover border |
| `--theme-popover-header-bg` | `color-mix(surface0 50%, card-bg)` | Popover header background |

### Offcanvas Tokens (2 variables)

| CSS Property | Default Reference | Purpose |
|-------------|-------------------|---------|
| `--theme-offcanvas-bg` | `--theme-card-bg` | Offcanvas panel background |
| `--theme-offcanvas-border` | `--theme-card-border` | Offcanvas panel border |

### Accordion Tokens (5 variables)

| CSS Property | Default Reference | Purpose |
|-------------|-------------------|---------|
| `--theme-accordion-bg` | `--theme-card-bg` | Accordion item background |
| `--theme-accordion-border` | `--theme-card-border` | Accordion item border |
| `--theme-accordion-active-bg` | `--theme-accent-bg-subtle` | Expanded accordion header background |
| `--theme-accordion-active-text` | `--theme-accent` | Expanded accordion header text |
| `--theme-accordion-btn-bg` | `--theme-card-bg` | Accordion button/header background |

### Nav Tab/Pill Tokens (6 variables)

| CSS Property | Default Reference | Purpose |
|-------------|-------------------|---------|
| `--theme-nav-tab-border` | `--theme-border` | Tab border color |
| `--theme-nav-tab-active-bg` | `--theme-card-bg` | Active tab background |
| `--theme-nav-tab-active-text` | `--theme-accent` | Active tab text color |
| `--theme-nav-tab-hover-bg` | `--theme-hover-bg` | Tab hover background |
| `--theme-nav-pill-active-bg` | `--theme-accent` | Active pill background |
| `--theme-nav-pill-active-text` | `--theme-base` | Active pill text color |

### Form Enhancement Tokens (8 variables)

| CSS Property | Default Reference | Purpose |
|-------------|-------------------|---------|
| `--theme-input-focus-border` | `--theme-accent` | Focused input border color |
| `--theme-input-placeholder-color` | `--theme-overlay1` | Input placeholder text color |
| `--theme-input-disabled-bg` | `--theme-surface0` | Disabled input background |
| `--theme-form-valid-color` | `--theme-green` | Valid form feedback color |
| `--theme-form-valid-border` | `--theme-green` | Valid input border color |
| `--theme-form-invalid-color` | `--theme-red` | Invalid form feedback color |
| `--theme-form-invalid-border` | `--theme-red` | Invalid input border color |
| `--theme-form-check-active-bg` | `--theme-accent` | Checked checkbox/radio background |

### Heading and Selection (3 variables)

| CSS Property | Default Reference | Purpose |
|-------------|-------------------|---------|
| `--theme-heading-color` | `--theme-text` | Heading text color |
| `--theme-highlight-bg` | `color-mix(yellow 30%, base)` | Text highlight / selection background |
| `--theme-highlight-text` | `--theme-text` | Text highlight / selection text color |

### Miscellaneous UI Tokens (9 variables)

| CSS Property | Default Reference | Purpose |
|-------------|-------------------|---------|
| `--theme-spinner-color` | `--theme-accent` | Loading spinner color |
| `--theme-close-btn-color` | `--theme-text-muted` | Close button icon color |
| `--theme-placeholder-bg` | `--theme-surface1` | Placeholder/skeleton loading background |
| `--theme-focus-ring-width` | `0.25rem` | Focus ring outline width |
| `--theme-disabled-opacity` | `0.65` | Opacity for disabled elements |
| `--theme-carousel-indicator-bg` | `--theme-overlay1` | Carousel indicator dot color |
| `--theme-carousel-indicator-active-bg` | `--theme-text` | Active carousel indicator color |
| `--theme-carousel-caption-color` | `--theme-text` | Carousel caption text color |

### Scrollbar Tokens (3 variables)

| CSS Property | Default Reference | Purpose |
|-------------|-------------------|---------|
| `--theme-scrollbar-track` | `--theme-surface0` | Scrollbar track background |
| `--theme-scrollbar-thumb` | `--theme-overlay0` | Scrollbar thumb color |
| `--theme-scrollbar-thumb-hover` | `--theme-overlay1` | Scrollbar thumb hover color |

## Creating a Custom Theme

1. Create a new directory with your theme's package name.
2. Add a `manifest.yaml` with all required fields and the 26 color variables.
3. Add a `styles.css` that maps the manifest variables to `--theme-*` CSS properties and includes semantic aliases, component tokens, typography, and spacing tokens.

Use an existing theme as a template. The key difference between dark and light themes is:

- **Dark themes** use surface variables for component backgrounds and higher-opacity shadows.
- **Light themes** often hardcode white (`#ffffff`) or near-white values for cards, inputs, and navigation to create elevation contrast on light page backgrounds. They use lower-opacity shadows.

### Tags

The `tags` field in the manifest is a flat list of strings for filtering and search. Common tag categories:

- **Collection**: The theme family name (e.g., `catppuccin`, `nord`, `dracula`)
- **Temperature**: `warm`, `cool`, `neutral`
- **Intensity**: `vibrant`, `muted`, `pastel`, `high-contrast`, `saturated`
- **Character**: `minimal`, `retro`, `elegant`, `natural`, `clean`, `deep`, `dim`

## License

Each theme retains its original license. Most themes are MIT licensed. The Tokyo Night variants are Apache-2.0 licensed. Check the `license` field in each theme's `manifest.yaml` for specifics.