GRMrGecko/chroma-themes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
chroma-themes/README.md
GRMrGecko c3a72752de first commit
2026-02-12 10:13:32 -06:00

593 lines
25 KiB
Markdown
Raw Permalink Blame History

# 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.
Reference in New Issue View Git Blame Copy Permalink