Dark mode

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

To override individual component styles instead of the whole theme, see 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 settings, so you control colors and styles in the dark appearance.

Type: object
Default value: {}

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

foldspace.agent('API-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"
  }
});