Themes & Branding

Theming in Dimension spans three levels:

Tenant-wide dark/light mode — global toggle in the platform header
Per-app theme override — independent dark/light setting inside any launched app
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

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:

"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:

"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:

"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

"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"

"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

"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:

"For all charts, use this palette in order:
#16A34A (brand green)
#07C983
#15803D
#0EA5E9
#6366F1
#8B5CF6
#EC4899
#F59E0B

Donut and pie charts should slice by descending count."

Wall-display optimisation

For NOC / SOC wall displays:

"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:

"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:

"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. 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.

Components

Every component you can theme

Prompt Engineering

Including the reusable Branding snippet

Recipes

Wall-display, brand-it, semantic-colour recipes

Exporting & PDF

PDF formats and the Schedule roadmap

Get started

Core Concepts

Build

Reference

Settings

Trust & Security