chroma-themes/README.md

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	Dark	A soft, muted dark color scheme
catppuccin-latte	Light	A light, warm color scheme
catppuccin-macchiato	Dark	A rich, deep dark color scheme
catppuccin-mocha	Dark	The darkest, richest Catppuccin flavor

Dracula

Theme	Mode	Description
dracula	Dark	A dark theme with vibrant accent colors
alucard	Light	The light counterpart to Dracula with warm parchment tones

Edge

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

Everforest

Theme	Mode	Description
everforest-dark	Dark	A green based warm color scheme inspired by nature
everforest-light	Light	A green based warm color scheme inspired by nature on a light canvas

Gruvbox

Theme	Mode	Description
gruvbox-dark	Dark	Retro groove color scheme with warm earthy tones
gruvbox-light	Light	Retro groove color scheme with warm earthy tones on a light canvas

Nord

Theme	Mode	Description
nord	Dark	An arctic, north-bluish dark color palette for clean and uncluttered design
nord-light	Light	An arctic, north-bluish light color palette for bright and airy design

Rose Pine

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

Sonokai

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

Tokyo Night

Theme	Mode	Description
tokyonight-day	Light	A clean light theme with vivid accents
tokyonight-moon	Dark	A clean dark theme with brighter, more saturated accents
tokyonight-night	Dark	The darkest variant with deep blue-black backgrounds
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:

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:

: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:

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

Or import it in your stylesheet:

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

Using Variables in Your CSS

Reference the theme variables anywhere in your styles:

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:

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:

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.