# Theming An Elements app is **monochrome by default** and brands with a single accent override. ## Monochrome by default `themes/default.css` sets `--accent` to `--neutral-900`. Since every primary button, link, focus ring, selected state, and accent surface reads `--accent`, an unbranded app is black-and-white, a deliberate, finished look with zero configuration. There is no "pick a color to get started" step. ## Branding is repointing accent Branding means overriding the accent token block in a theme rule imported after the package, inside `@layer tokens`: ```css @import "@elements/style"; @layer tokens { :root { --accent: #ff0080; --accent-deep: #cc0066; --accent-soft: #ffe0ef; --accent-ink: #5c0030; } } ``` Four lines and the whole system takes the color. The `@layer tokens` wrapper keeps the override in the same layer as the shipped theme, so it cleanly replaces those values rather than fighting them on specificity. See [branding](branding) for the light-touch and full-ramp recipes. ## Dark mode is automatic Components never check whether the app is in light or dark mode. They only read semantic tokens (`--bg`, `--ink`, `--accent`, …). Because `themes/default.css` remaps those tokens for dark mode, anything built from tokens is dark-ready with no extra work. The OS preference is the default; a `data-theme` attribute on `` forces a mode. See [dark-mode](dark-mode). - [branding](branding): the one-accent override and the full brand-ramp recipe. - [dark-mode](dark-mode): the OS preference, the `data-theme` toggle, and why components come out dark-ready for free.