# Theming URL: /chirp-ui/docs/theming/ Section: theming Description: CSS variables, dark mode, and customization --- > For a complete page index, fetch /chirp-ui/llms.txt. chirp-ui uses `prefers-color-scheme` for dark mode. Override any `--chirpui-*` variable to customize. ## Base Variables ```css :root { --chirpui-accent: #7c3aed; --chirpui-container-max: 80rem; } ``` Base colors drive derived states (hover, active, light, muted) via `color-mix()`. ## Manual Light/Dark Toggle Set `data-theme="light"` or `data-theme="dark"` on ``. ## Optional Themes ```html ``` ## Curated Theme Packs Chirp UI also ships token-only catalog packs for fresh apps: ```html ``` Packaged options are `atlas`, `ember`, and `sage`. Each defines light, dark, and `system` branches using only `--chirpui-*` tokens. The canonical source guide is [`docs/APP-THEME.md`](https://github.com/lbliii/chirp-ui/blob/main/docs/APP-THEME.md?plain=1). 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](/docs/theming/chirp-theme/) - packaged Bengal theme with the `b-site`-inspired aesthetic - [Bengal theme controls anatomy](/docs/theming/bengal-theme-controls/) - packaged theme hooks for appearance, search, mobile navigation, TOC, and docs tabs ## Motion All animations respect `prefers-reduced-motion`. No configuration needed.