Theming
elements man style/theming Read as markdownAn 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:
@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 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
<html> forces a mode. See dark-mode.