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

# Branding & Theming

> Customize the app's colors, logo, and theme.

Branding lives in a single file: `app.config.ts`. It holds your name, logo,
theme colors, and mode. The theme is applied at runtime, so changes take effect
without touching component code.

## app.config.ts

This one file controls branding, theme, and mode (single vs multi-product). Edit
it to make the app yours:

* **Name and logo** — your brand identity in the header and auth screens
* **Theme colors** — applied at runtime via the theme layer
* **Mode** — `single-product` or `multi-product` (see [Modes](/apps/modes))

## Runtime theming

The starter applies your `app.config` colors at runtime (`src/lib/theme.ts`), so
every screen — including AI-generated ones — picks up your palette automatically.

## What's in the box

```
src/
├── lib/theme.ts            ← applies app.config colors at runtime
├── components/             ← Logo, DeviceCard, ControlWidget, TelemetryChart, …
└── screens/                ← all screens, including generated device UIs
```

<Card title="Next: Deployment" icon="rocket" href="/apps/deployment">
  Build for web and native.
</Card>