# How to Configure the Dashboard Theme with Dark Luxury Black and Gold Accents in Understand-Anything

> Easily customize your Understand Anything dashboard with a dark luxury black and gold theme. Apply instantly with localStorage or set project-wide defaults in meta.json.

- Repository: [Egonex/Understand-Anything](https://github.com/Egonex-AI/Understand-Anything)
- Tags: how-to-guide
- Published: 2026-06-18

---

**Set `localStorage.setItem('ua-theme', JSON.stringify({ presetId: 'dark-gold', accentId: 'gold' }))` to instantly apply the dark luxury theme, or define the `theme` field in [`meta.json`](https://github.com/Egonex-AI/Understand-Anything/blob/main/meta.json) for project-wide defaults.**

The **Understand-Anything** dashboard from Egonex-AI implements a sophisticated theme system that drives all visual styling through CSS custom properties. To achieve the premium dark luxury aesthetic—featuring deep black backgrounds (`#0a0a0a`) and elegant gold accents (`#d4a574`)—you must configure the built-in `dark-gold` preset and select the appropriate accent swatch. This configuration can be persisted via browser storage for personal preferences or embedded directly in your project's [`meta.json`](https://github.com/Egonex-AI/Understand-Anything/blob/main/meta.json) for team-wide defaults.

## Where the Theme System is Defined

The theme architecture lives entirely within the `@understand-anything/dashboard` package and consists of four key files:

- **[`packages/dashboard/src/themes/presets.ts`](https://github.com/Egonex-AI/Understand-Anything/blob/main/packages/dashboard/src/themes/presets.ts)** – Defines the `dark-gold` preset with base colors and the gold accent swatch
- **[`packages/dashboard/src/themes/types.ts`](https://github.com/Egonex-AI/Understand-Anything/blob/main/packages/dashboard/src/themes/types.ts)** – Contains TypeScript definitions for `PresetId`, `ThemePreset`, `AccentSwatch`, and `ThemeConfig`
- **[`packages/dashboard/src/themes/theme-engine.ts`](https://github.com/Egonex-AI/Understand-Anything/blob/main/packages/dashboard/src/themes/theme-engine.ts)** – Implements the `applyTheme()` function that injects CSS variables into the document root
- **[`packages/core/src/types.ts`](https://github.com/Egonex-AI/Understand-Anything/blob/main/packages/core/src/types.ts)** – Extends `AnalysisMeta` with an optional `theme?: ThemeConfig` field for CLI-generated defaults

The `dark-gold` preset hardcodes the luxury black background as `--color-root: #0a0a0a` and establishes the gold palette with `--color-accent: #d4a574` according to the source in [`presets.ts`](https://github.com/Egonex-AI/Understand-Anything/blob/main/presets.ts).

## Configuring the Dark Luxury Theme

You can activate the dark luxury theme through three primary methods, depending on whether you want a personal preference or a project-wide default.

### Method 1: Via localStorage (Personal Preference)

For immediate, browser-specific configuration, write the theme configuration to `localStorage` using the key `ua-theme`. The dashboard checks this storage first on load and calls `applyTheme()` automatically.

```javascript
// Set dark luxury theme with gold accents
localStorage.setItem(
  'ua-theme',
  JSON.stringify({ 
    presetId: 'dark-gold', 
    accentId: 'gold' 
  })
);

```

Refresh the dashboard to see the deep black background (`#0a0a0a`) and gold accents (`#d4a574`) applied instantly across all components.

### Method 2: Via meta.json (Project-Level Default)

To enforce the theme for all users accessing the project, configure the `theme` field in the project's [`meta.json`](https://github.com/Egonex-AI/Understand-Anything/blob/main/meta.json) file. The dashboard fetches [`/meta.json`](https://github.com/Egonex-AI/Understand-Anything/blob/main//meta.json) on startup and uses this configuration as a fallback when `localStorage` is empty.

```json
{
  "lastAnalyzedAt": "...",
  "gitCommitHash": "...",
  "version": "...",
  "analyzedFiles": 123,
  "theme": {
    "presetId": "dark-gold",
    "accentId": "gold"
  }
}

```

The CLI generates this file at [`packages/core/src/types.ts`](https://github.com/Egonex-AI/Understand-Anything/blob/main/packages/core/src/types.ts) defines the `AnalysisMeta` interface that includes this optional `theme` property.

### Method 3: Changing Accent Swatches

The `dark-gold` preset ships with **8 distinct accent swatches** including gold, ocean, emerald, and others. To experiment with different luxury accents while keeping the black background, update only the `accentId`:

```javascript
// Switch to ocean accent while maintaining dark luxury background
localStorage.setItem(
  'ua-theme', 
  JSON.stringify({ 
    presetId: 'dark-gold', 
    accentId: 'ocean' 
  })
);

```

The `applyTheme()` function in [`theme-engine.ts`](https://github.com/Egonex-AI/Understand-Anything/blob/main/theme-engine.ts) (lines 44-46) dynamically updates `--color-accent`, `--color-accent-dim`, and `--color-accent-bright` based on your selection.

## How the Theme Engine Applies Styles

The `applyTheme()` function in [`packages/dashboard/src/themes/theme-engine.ts`](https://github.com/Egonex-AI/Understand-Anything/blob/main/packages/dashboard/src/themes/theme-engine.ts) (lines 33-55) executes a three-stage injection process:

1. **Base Color Injection** – Iterates over `preset.colors` and sets CSS variables like `--color-root`, `--color-surface`, and `--color-text` on `document.documentElement`
2. **Accent Color Mapping** – Assigns `--color-accent`, `--color-accent-dim`, and `--color-accent-bright` from the selected swatch values
3. **Derived Value Calculation** – Calls `deriveFromAccent()` (lines 10-31) to compute borders, glass effects, scrollbar colors, and glow effects based on the accent hue

Because all variables are applied to the root `<html>` element, **zero-reload theme switching** occurs instantly—every component referencing these CSS variables updates automatically without requiring a page refresh.

## Using the Built-In Theme Picker Component

The dashboard provides a [`ThemePicker.tsx`](https://github.com/Egonex-AI/Understand-Anything/blob/main/ThemePicker.tsx) component that exposes the theme configuration through a UI interface. This component internally invokes the same `applyTheme()` function and persists selections to `localStorage`. Located in the dashboard header, the picker allows non-technical users to select the **Dark Gold** preset and switch between the 8 available accent swatches without writing code.

## Summary

- **Primary Files**: [`presets.ts`](https://github.com/Egonex-AI/Understand-Anything/blob/main/presets.ts) defines the `dark-gold` preset with `#0a0a0a` background; [`theme-engine.ts`](https://github.com/Egonex-AI/Understand-Anything/blob/main/theme-engine.ts) contains the `applyTheme()` implementation
- **Configuration Methods**: `localStorage` key `ua-theme` for personal settings, or [`meta.json`](https://github.com/Egonex-AI/Understand-Anything/blob/main/meta.json) `theme` field for project defaults
- **Color Values**: Black background (`#0a0a0a`) and gold accent (`#d4a574`) defined in the `dark-gold` preset
- **Accent Options**: 8 available swatches (gold, ocean, emerald, etc.) switchable via the `accentId` property
- **Application**: CSS variables injected to `document.documentElement` enable instant, zero-reload theme updates

## Frequently Asked Questions

### What CSS variables control the dark luxury theme colors?

The dark luxury theme sets `--color-root: #0a0a0a` for the background and `--color-accent: #d4a574` for the gold highlights. Additional variables include `--color-surface`, `--color-text`, `--color-accent-dim`, and `--color-accent-bright`, all defined in [`packages/dashboard/src/themes/presets.ts`](https://github.com/Egonex-AI/Understand-Anything/blob/main/packages/dashboard/src/themes/presets.ts) and injected by `applyTheme()` in [`theme-engine.ts`](https://github.com/Egonex-AI/Understand-Anything/blob/main/theme-engine.ts).

### Can I set the theme permanently for all team members?

Yes. Add the `theme` configuration object to your project's [`meta.json`](https://github.com/Egonex-AI/Understand-Anything/blob/main/meta.json) file. The dashboard reads this file at [`/meta.json`](https://github.com/Egonex-AI/Understand-Anything/blob/main//meta.json) and applies the specified `presetId` and `accentId` as the default when no `localStorage` preference exists for the user.

### How do I switch from gold to a different accent color while keeping the black background?

Update the `accentId` in your theme configuration while keeping `presetId: 'dark-gold'`. The preset supports 8 swatches including ocean, emerald, and ruby. For example: `localStorage.setItem('ua-theme', JSON.stringify({ presetId: 'dark-gold', accentId: 'emerald' }))`.

### Where is the theme configuration stored in the source code?

The theme definitions reside in [`packages/dashboard/src/themes/presets.ts`](https://github.com/Egonex-AI/Understand-Anything/blob/main/packages/dashboard/src/themes/presets.ts), type definitions in [`types.ts`](https://github.com/Egonex-AI/Understand-Anything/blob/main/types.ts), and the application logic in [`theme-engine.ts`](https://github.com/Egonex-AI/Understand-Anything/blob/main/theme-engine.ts). The `dark-gold` preset specifically defines the luxury black and gold color scheme that creates the premium dashboard aesthetic.