chirp-ui usesprefers-color-scheme for dark mode. Override any --chirpui-*variable to customize.
Base Variables
:root {
--chirpui-accent: #7c3aed;
--chirpui-container-max: 80rem;
}
Base colors drive derived states (hover, active, light, muted) via color-mix().
Manual Light/Dark Toggle
Setdata-theme="light" or data-theme="dark" on <html>.
Optional Themes
<link rel="stylesheet" href="/static/themes/holy-light.css">
Curated Theme Packs
Chirp UI also ships token-only catalog packs for fresh apps:
<link rel="stylesheet" href="/static/chirpui.css">
<link rel="stylesheet" href="/static/themes/atlas.css">
Packaged options are atlas, ember, and sage. Each defines light, dark,
andsystem branches using only --chirpui-*tokens. The canonical source
guide is
docs/APP-THEME.md.
The runnable component showcase includes a theme-pack matrix at/theme-packs.
Bengal Theme
For fully static Bengal sites,chirp-ui now also ships chirp-theme, a
static-first docs and marketing theme packaged in this project.
- chirp-theme - packaged Bengal theme with the
b-site-inspired aesthetic - Bengal theme controls anatomy - packaged theme hooks for appearance, search, mobile navigation, TOC, and docs tabs
Motion
All animations respectprefers-reduced-motion. No configuration needed.