> ## Documentation Index
> Fetch the complete documentation index at: https://archie.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Theming

> Configure branding, colors, fonts, and dark mode for your Archie app — applied across every component and page.

Theming controls the visual identity of your app: colors, typography, spacing, border radii, and dark mode. Theme values are defined once and applied across every component automatically.

## Where theme lives

Your theme is defined in `app/theme.ts` (or your stack's equivalent). It is a single source of truth: components, pages, and generated UI all reference theme tokens rather than hard-coded values.

The default theme uses Tailwind's design tokens with values from your blueprint's brand section.

## What you can configure

### Colors

Colors are defined as semantic tokens, not raw hex values:

* **Brand** — primary, secondary, accent
* **Surface** — background, surface, surface-elevated
* **Content** — primary, secondary, tertiary, inverse
* **Status** — success, warning, error, info

Each token has a light-mode and dark-mode value. Update one token, the change cascades.

### Typography

* Font families — primary, monospace
* Font sizes — xs through 4xl, with consistent line heights
* Font weights — normal, medium, semibold, bold

### Spacing and sizing

* Spacing scale — 0 through 24, in consistent increments
* Border radii — none, sm, md, lg, full
* Shadows — none, sm, md, lg

## How to update the theme

Three ways:

* **[Visual editor](/features/frontend/visual-editor)** — open the theme panel, change colors and typography with a UI. Useful for visual tuning.
* **[Talking to Archie](/features/frontend/talking-to-archie)** — describe a change ("brand color to #5C7CFA, primary font to Inter").
* **IDE** — edit `app/theme.ts` directly.

Changes apply live to the preview. Saved theme values travel with the project to GitHub.

## Dark mode

Dark mode is on by default. Each color token has a light and dark value. Users toggle their preference; the app responds.

To customize dark mode:

* Edit the dark values for each color token
* Test by switching the preview's mode in the visual editor
* For component-specific dark mode behavior, use Tailwind's `dark:` modifier in the component code

## Brand assets

Logos, favicons, and OG images live in `public/`. The blueprint's brand section is where you upload them initially; you can swap them anytime by replacing the file in `public/` or through the [Assets](/features/assets/overview) surface.

## When to put a change in theme vs. a component

* **In theme** — used in many places, expected to apply consistently (brand color, body font, success state color)
* **In a component** — specific to one element type and not reused (a special button variant, a unique card style)

Putting one-off styles in theme creates noise. Putting reusable styles in components creates inconsistency. Use the right scope.

## Multi-brand setups

If you build multiple white-labeled apps from a single project (Enterprise feature), the theme can be parameterized by tenant. Each tenant's theme overrides the base. See [Enterprise overview](/introduction/enterprise/overview) for the agency capabilities.