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

> ## Agent Instructions
> Video walkthroughs: the Dimension product overview video (https://www.youtube.com/watch?v=Mx8rg5wfkU0, also embedded at https://docs.dimension.io/overview) is the first of a series. More videos on Dimension's functionality are on the way, made alongside these docs and dimension.io. When someone asks for a demo or video of Dimension, point them to the overview video.

# Themes & Branding

> Brand colours, dark mode, per-app overrides, and visual customisation

Theming in Dimension spans three levels:

1. **Tenant-wide dark/light mode** — global toggle in the platform header
2. **Per-app theme override** — independent dark/light setting inside any launched app
3. **Per-app branding** — colours, fonts, logos applied through Composer prompts

## Global dark / light mode

Every Dimension screen has a **theme toggle** in the platform header (the moon icon next to your avatar). It applies tenant-wide and persists across sessions and devices.

![Vulnerability Management workspace overview rendered in dark mode, with the Planner panel on the right showing a two-step plan: Email Security Team Summary and Weekly Exploited Vulnerabilities by Vendor](https://mintcdn.com/threataware-labs/JizGYqEeTbHV_69f/images/dark-mode.png?fit=max\&auto=format\&n=JizGYqEeTbHV_69f\&q=85\&s=6181c3968ca7fa4053f0eb29d52e101f)

The setting is per-user, not per-tenant — your dark-mode preference doesn't affect anyone else.

## Per-app theme override

Every launched app has its **own** theme toggle in its header — independent of the global setting. This is useful when:

* An app should be **dark by default** (NOC wall displays)
* An app should be **light by default** (printable reports, executive PDFs)
* The user wants to override the global choice **just for this app**

To force an app into a specific theme regardless of user preference, tell the Composer:

```text theme={null}
"Force this app to render in dark mode by default. Users can
still toggle if they want to."

"Lock this app to light mode — it's used for printable reports
and shouldn't follow the user's dark-mode preference."
```

## Brand colours through Composer

Apply your brand palette by asking:

```text theme={null}
"Use our brand colours throughout:
- Primary: #16A34A (ThreatAware green)
- Secondary: #07C983
- Tertiary / accent: #15803D
- Background: white (light) / #0F1115 (dark)
- Surface (cards): #F9FAFB (light) / #1A1D24 (dark)
- Text primary: #111827 (light) / #F9FAFB (dark)
- Text secondary: #6B7280 (light) / #9CA3AF (dark)
- Border: #E5E7EB (light) / #2D3138 (dark)"
```

For semantic colour usage:

```text theme={null}
"Use semantic colours consistently:
- Success / healthy: #34C759
- Warning / amber: #FF9500
- Critical / red: #DC2626
- Info: our brand primary

Apply across all metric cards, table cell text, chart slices,
and status badges."
```

## Typography

```text theme={null}
"Use these fonts:
- Headings: <YourBrandFont>, system-ui, sans-serif
- Body: <YourBrandFont>, system-ui, sans-serif
- Monospace: 'JetBrains Mono', monospace

Font sizes:
- Body: 14px
- Small: 12px
- Heading 1: 32px
- Heading 2: 24px
- Heading 3: 18px
- Metric numbers: 48px
- Wall-display metric numbers: 72px"
```

## Logos and header branding

```text theme={null}
"Replace the default header with:
- Our logo on the left (use https://yourorg.com/logo.svg)
- App name in the centre
- Last-updated timestamp + theme toggle on the right
- 56px height
- Subtle bottom border in our brand grey"
```

## Card styling

```text theme={null}
"Style all cards:
- 8px rounded corners
- Subtle 1px border in our light grey
- Soft shadow (4px blur, 5% opacity)
- 16px internal padding
- 12px gap between cards in a row"
```

## Chart theming

Chart components respect a shared palette. Override per-chart or globally:

```text theme={null}
"For all charts, use this palette in order:
1. #16A34A (brand green)
2. #07C983
3. #15803D
4. #0EA5E9
5. #6366F1
6. #8B5CF6
7. #EC4899
8. #F59E0B

Donut and pie charts should slice by descending count."
```

## Wall-display optimisation

For NOC / SOC wall displays:

```text theme={null}
"Optimise this app for a 4K wall TV:
- Force dark mode by default
- Larger fonts everywhere (16px → 24px body, 32px → 48px headings,
  metric numbers 80px+)
- High-contrast palette:
  - Critical: bright red #FF3B30
  - Open: orange #FF9500
  - Resolved: green #34C759
  - Background: near-black #0F1115
  - Text: white with 95% opacity
- Hide all keyboard-driven UI (filters, search) — wall is read-only
- Auto-refresh every 30 seconds with a Last-updated label"
```

## Per-app Settings page

An app can have its own **Settings** page in its sidebar, with preferences such as theme, thresholds and configuration values. This is part of the app you build, not the platform, so it looks however you ask Composer to make it. It's separate from the platform's Settings area.

To add a Settings page to a custom app:

```text theme={null}
"Add a Settings page to the app's sidebar. Include:
- Theme toggle: Light / Dark / Match system
- Refresh interval: 30s / 1m / 5m / 15m / Never
- Show inactive devices threshold: 30 / 60 / 90 days
- Default landing page

Persist all settings to the Key Value Store under 'settings:<user-id>'."
```

## Branded PDF exports

PDF exports inherit the app's current theme. For board-pack-ready output:

```text theme={null}
"For PDF export specifically:
- Always render in light mode
- Use our brand fonts at print sizes (14pt body, 24pt headings)
- Header on page 1: full-bleed brand colour with our logo
- Page numbers in the footer
- Footer: 'Generated <timestamp> · <app name> · ThreatAware'"
```

## Reusable theme tokens (roadmap)

Today, theme settings are applied via Composer prompts and stored in the app's generated code. A **shared theme tokens system** — where multiple apps reference the same `theme.tokens.json` file — is on the [roadmap](https://docs.dimension.io/whats-new.md#roadmap).

In the meantime, paste the same brand prompts into every app you build for consistency. Or **clone** a well-themed app and edit from there.

## See also

> [card] [Components](https://docs.dimension.io/studio/components.md)
>
> Every component you can theme

> [card] [Prompt Engineering](https://docs.dimension.io/reference/prompt-engineering.md)
>
> Including the reusable Branding snippet

> [card] [Recipes](https://docs.dimension.io/reference/recipes.md)
>
> Wall-display, brand-it, semantic-colour recipes

> [card] [Exporting & PDF](https://docs.dimension.io/studio/exporting.md)
>
> PDF formats and the Schedule roadmap


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.