Theming

CSS variables, dark mode, and customization

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

Motion

All animations respectprefers-reduced-motion. No configuration needed.