Themes

Navieo's chat widget supports full theme customization. Choose between built-in dark and light presets, or pass custom color variables to match your app's design system.

Quick Start

Pass the theme prop to NavieoNextProvider (or NavieoProvider):

import { NavieoNextProvider } from "@navieo/react/next";

// Light theme (default — no prop needed)
<NavieoNextProvider>
  {children}
</NavieoNextProvider>

// Dark theme
<NavieoNextProvider theme="dark">
  {children}
</NavieoNextProvider>

Custom Themes

Pass an object with a base preset and custom variables to override specific colors:

<NavieoNextProvider
  theme={{
    base: "dark",
    variables: {
      primary: "#6366f1",
      userBubble: "#6366f1",
      userBubbleText: "#ffffff",
      borderRadius: "12px",
    },
  }}
>
  {children}
</NavieoNextProvider>

Any variable you don't override inherits from the base preset ("light" by default).

Available Variables

These defaults describe React SDK 3.0.0 and can differ from earlier published versions. See release compatibility. Dashboard settings and provider overrides can change them.

Variable	Description	Dark Default	Light Default
`background`	Widget background	`#09090b`	`#ffffff`
`foreground`	Primary text color	`#fafafa`	`#09090b`
`mutedForeground`	Secondary/muted text	`#a1a1aa`	`#71717a`
`border`	Border color	`#5f5f69`	`#8f8f99`
`borderHover`	Border hover/focus	`#71717a`	`#71717a`
`surface`	Cards, input area, assistant bubbles	`rgba(255,255,255,0.08)`	`rgba(0,0,0,0.06)`
`userBubble`	User message background	`#fafafa`	`#09090b`
`userBubbleText`	User message text	`#09090b`	`#fafafa`
`assistantBubble`	Assistant message background	`rgba(255,255,255,0.10)`	`rgba(0,0,0,0.08)`
`assistantBubbleText`	Assistant message text	`#d4d4d8`	`#3f3f46`
`primary`	Accent color for highlights	`#4A9DC9`	`#1A6B9C`
`buttonBackground`	Floating button background	`#09090b`	`#ffffff`
`buttonForeground`	Floating button icon	`#fafafa`	`#09090b`
`buttonBorder`	Floating button border	`#5f5f69`	`#8f8f99`
`modeAsk`	Ask indicator	`#4A9DC9`	`#1A6B9C`
`modeGuide`	Guidance indicator	`#4A9DC9`	`#145580`
`borderRadius`	Widget border radius	`16px`	`16px`
`fontFamily`	Font stack	System sans-serif	System sans-serif

Using Preset Exports

You can also import the preset objects directly for programmatic access:

import { darkTheme, lightTheme } from "@navieo/react";

console.log(darkTheme.background); // "#09090b"
console.log(lightTheme.foreground); // "#09090b"

Brand Example

Match the widget to your brand colors:

<NavieoNextProvider
  theme={{
    base: "dark",
    variables: {
      background: "#0f172a",
      foreground: "#f8fafc",
      mutedForeground: "#94a3b8",
      surface: "rgba(148, 163, 184, 0.08)",
      border: "rgba(148, 163, 184, 0.12)",
      borderHover: "rgba(148, 163, 184, 0.24)",
      userBubble: "#3b82f6",
      userBubbleText: "#ffffff",
      assistantBubble: "rgba(148, 163, 184, 0.1)",
      assistantBubbleText: "#cbd5e1",
      buttonBackground: "#3b82f6",
      buttonForeground: "#ffffff",
      buttonBorder: "rgba(59, 130, 246, 0.3)",
    },
  }}
>
  {children}
</NavieoNextProvider>

TypeScript

All theme types are fully exported:

import type {
  NavieoTheme,
  NavieoThemeVariables,
  NavieoResolvedTheme,
} from "@navieo/react";

NavieoTheme — the input type accepted by the theme prop
NavieoThemeVariables — partial object for custom overrides
NavieoResolvedTheme — fully resolved theme with all values filled