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

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 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 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 – Defines the dark-gold preset with base colors and the gold accent swatch
• packages/dashboard/src/themes/types.ts – Contains TypeScript definitions for PresetId, ThemePreset, AccentSwatch, and ThemeConfig
• packages/dashboard/src/themes/theme-engine.ts – Implements the applyTheme() function that injects CSS variables into the document root
• 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.

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.

// 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 file. The dashboard fetches /meta.json on startup and uses this configuration as a fallback when localStorage is empty.

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

The CLI generates this file at 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:

// 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 (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 (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 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 defines the dark-gold preset with #0a0a0a background; theme-engine.ts contains the applyTheme() implementation
• Configuration Methods: localStorage key ua-theme for personal settings, or 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 and injected by applyTheme() in 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 file. The dashboard reads this file at /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, type definitions in types.ts, and the application logic in theme-engine.ts. The dark-gold preset specifically defines the luxury black and gold color scheme that creates the premium dashboard aesthetic.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}