# How to Customize the Understand-Anything Dashboard: Themes, Presets, and Meta-Configuration

> Unlock full control over your Understand Anything dashboard with customization options. Modify themes, presets, and meta-configuration for a personalized experience.

- Repository: [Yuxiang Lin/Understand-Anything](https://github.com/Lum1104/Understand-Anything)
- Tags: how-to-guide
- Published: 2026-06-07

---

**Yes, you can fully customize the Understand-Anything dashboard through its React-based theme system by modifying presets, overriding CSS variables, or supplying a project-specific [`meta.json`](https://github.com/Lum1104/Understand-Anything/blob/main/meta.json) file.**

The Understand-Anything dashboard in the `Lum1104/Understand-Anything` repository is a browser-based React application styled with TailwindCSS. Because every visual token is managed through a centralized theme engine, you can customize the Lum1104/Understand-Anything dashboard at runtime without touching individual components.

## Customize the Understand-Anything Dashboard Through Its Theme System

The theme architecture lives in `understand-anything-plugin/packages/dashboard/src/themes` and splits responsibilities across state management, preset definitions, and runtime injection.

### Theme State and the useTheme Hook

Global theme state is controlled by the **`useTheme`** hook exported from [`understand-anything-plugin/packages/dashboard/src/themes/index.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/understand-anything-plugin/packages/dashboard/src/themes/index.ts). It exposes `setPreset`, `setAccent`, and `setHeadingFont` mutators that update the active palette, accent swatch, and typography. The built-in **ThemePicker** component in [`understand-anything-plugin/packages/dashboard/src/components/ThemePicker.tsx`](https://github.com/Lum1104/Understand-Anything/blob/main/understand-anything-plugin/packages/dashboard/src/components/ThemePicker.tsx) uses this exact API to render its user controls.

### How ThemeProvider Loads Meta-Configuration

The root `App` component in [`understand-anything-plugin/packages/dashboard/src/App.tsx`](https://github.com/Lum1104/Understand-Anything/blob/main/understand-anything-plugin/packages/dashboard/src/App.tsx) wraps the dashboard in a **`<ThemeProvider>`** sourced from [`themes/index.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/themes/index.ts). On mount, [`App.tsx`](https://github.com/Lum1104/Understand-Anything/blob/main/App.tsx) fetches a **meta-theme** file named [`meta.json`](https://github.com/Lum1104/Understand-Anything/blob/main/meta.json) via a standard `fetch` call. This allows any scanned project to ship a pre-selected theme that loads before user interaction.

### Preset Definitions in presets.ts

Ready-made palettes are stored as plain JavaScript objects in **[`presets.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/presets.ts)** ([`understand-anything-plugin/packages/dashboard/src/themes/presets.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/understand-anything-plugin/packages/dashboard/src/themes/presets.ts)). Each preset bundles an `id`, `name`, `isDark` flag, `defaultAccentId`, an `accentSwatches` array, and a `colors` token map. Because the data is plain objects, extending the list is the primary way to introduce new visual styles.

## Change the Dashboard Theme Programmatically

Any component can import `useTheme` and call the same setters used by the official picker.

```tsx
import { useTheme } from "./themes/index.ts";

export function MyCustomSettings() {
  const { setPreset, setAccent, setHeadingFont } = useTheme();

  const applyMyTheme = () => {
    setPreset("dark-ocean");
    setAccent("emerald");
    setHeadingFont("serif");
  };

  return <button onClick={applyMyTheme}>Apply my theme</button>;
}

```

This pattern replicates the internal behavior of [`ThemePicker.tsx`](https://github.com/Lum1104/Understand-Anything/blob/main/ThemePicker.tsx) and updates the dashboard instantly.

## Add a Custom Preset in presets.ts

Open [`understand-anything-plugin/packages/dashboard/src/themes/presets.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/understand-anything-plugin/packages/dashboard/src/themes/presets.ts) and append a new object to the `PRESETS` array:

```tsx
{
  id: "dark-cerulean",
  name: "Dark Cerulean",
  isDark: true,
  defaultAccentId: "cerulean",
  accentSwatches: [
    { id: "cerulean", name: "Cerulean", accent: "#2a7fbd", accentDim: "#236c9e", accentBright: "#4aa0e2" },
  ],
  colors: {
    root: "#0a0a1f",
    surface: "#111133",
  },
}

```

After saving and reloading the dashboard, the preset appears in the **ThemePicker** list automatically.

## Lock the Startup Theme with meta.json

You can force a startup theme by placing a [`meta.json`](https://github.com/Lum1104/Understand-Anything/blob/main/meta.json) file in the `.understand-anything/` directory of your scanned project. The dashboard loads this file in [`App.tsx`](https://github.com/Lum1104/Understand-Anything/blob/main/App.tsx) before rendering the UI.

```json
{
  "theme": {
    "presetId": "light-minimal",
    "accentId": "teal",
    "headingFont": "sans"
  }
}

```

When present, the dashboard initializes with these values without waiting for user input.

## How Changes Propagate Across the UI

Color updates reach every view through CSS variables generated by **[`theme-engine.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/theme-engine.ts)** ([`understand-anything-plugin/packages/dashboard/src/themes/theme-engine.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/understand-anything-plugin/packages/dashboard/src/themes/theme-engine.ts)). This engine maps preset tokens to properties such as `--color-node-*` and `--text-primary`. Because the graph view, sidebar, and code viewer all consume these variables, updating a preset propagates throughout the UI immediately and does not require a rebuild.

## Summary

- The `useTheme` hook in [`themes/index.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/themes/index.ts) provides `setPreset`, `setAccent`, and `setHeadingFont` for runtime customization.
- [`App.tsx`](https://github.com/Lum1104/Understand-Anything/blob/main/App.tsx) fetches [`.understand-anything/meta.json`](https://github.com/Lum1104/Understand-Anything/blob/main/.understand-anything/meta.json) on startup, letting projects define a default theme.
- New color palettes are added by extending the `PRESETS` array in [`presets.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/presets.ts).
- [`theme-engine.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/theme-engine.ts) converts token objects into CSS variables that drive all dashboard visuals.
- The **ThemePicker** component demonstrates the same API available to any custom component.

## Frequently Asked Questions

### Can I customize the Understand-Anything dashboard without modifying source code?

Yes. You can ship a [`meta.json`](https://github.com/Lum1104/Understand-Anything/blob/main/meta.json) configuration inside your project's `.understand-anything/` folder. The dashboard reads this file at startup via [`App.tsx`](https://github.com/Lum1104/Understand-Anything/blob/main/App.tsx), so you can lock a preset, accent, and font without changing any React components.

### How do I add a completely new color preset?

Define a new preset object in [`understand-anything-plugin/packages/dashboard/src/themes/presets.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/understand-anything-plugin/packages/dashboard/src/themes/presets.ts) with a unique `id`, `colors` map, and `accentSwatches` array. The dashboard discovers it automatically and surfaces it in the **ThemePicker** list after reload.

### What controls the dark or light mode of a preset?

Each preset object includes an **`isDark`** boolean flag. The UI uses this flag to determine whether to render the dashboard in dark mode, and it pairs with the `colors` tokens in [`theme-engine.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/theme-engine.ts) to set the appropriate CSS variables.

### Do custom themes apply to every part of the dashboard?

Yes. Because [`theme-engine.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/theme-engine.ts) injects global CSS variables like `--text-primary` and `--color-node-*`, all components—including the graph view, sidebar, and code viewer—inherit the active theme automatically. Updating the preset or accent through `useTheme` propagates instantly across the entire UI.