# Dark mode

Configure a dark theme and a dark-mode logo so your agent stays on-brand across light and dark appearances.

Supply theme overrides and a dedicated logo that apply when the agent renders in dark mode. Pass a `darkModeSettings` object to `setConfiguration`.

<DarkModeComparison />

To override individual component styles instead of the whole theme, see [Style Overrides](/customize/style-overrides/).

## darkLogoUrl

URL of the logo shown when dark mode is active. Use it to keep branding legible against a dark background.

Type: `string`\
Default value: `""`

## darkTheme

Theme overrides applied in dark mode. Its structure mirrors the standard [Theme](/customize/theme/) settings, so you control colors and styles in the dark appearance.

Type: `object`\
Default value: `{}`

<Mermaid chart={`flowchart TD
    T["Theme settings<br/>primaryColor, fontFamily, ..."] --> L["Light mode"]
    DT["darkModeSettings.darkTheme<br/>overrides same keys"] --> D["Dark mode"]
    T -.->|"inherits unset keys"| D
    DL["darkLogoUrl"] --> D
    style L fill:#ffffff,stroke:#e2e4ea,color:#0a0e1a
    style D fill:#0a0e1a,stroke:#1d2336,color:#e2e4ea
`} />

## Example

```javascript
foldspace.agent('YOUR-AGENT-KEY').setConfiguration({
  // Dark mode settings
  darkModeSettings: {
    darkTheme: {
      primaryColor: "#3B82F6",
      primaryFontColor: "#FFFFFF",
      backgroundColor: "#0F1724",
      fontFamily: "Roboto",
      fontSize: 14,
      secondaryFontColor: "#9CA3AF",
      secondaryColor: "#111827",
      borderColor: "#1F2937"
    },
    darkLogoUrl: "https://assets.foldspace.com/logos/foldspace-logo-dark.svg"
  }
});
```