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 ("dark" by default).

Available Variables

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	`rgba(255,255,255,0.10)`	`rgba(0,0,0,0.08)`
`borderHover`	Border hover/focus	`rgba(255,255,255,0.20)`	`rgba(0,0,0,0.16)`
`surface`	Cards, input area, assistant bubbles	`rgba(255,255,255,0.05)`	`rgba(0,0,0,0.03)`
`userBubble`	User message background	`#fafafa`	`#09090b`
`userBubbleText`	User message text	`#09090b`	`#fafafa`
`assistantBubble`	Assistant message background	`rgba(255,255,255,0.06)`	`rgba(0,0,0,0.04)`
`assistantBubbleText`	Assistant message text	`#d4d4d8`	`#3f3f46`
`primary`	Accent color for highlights	`#fafafa`	`#09090b`
`buttonBackground`	Floating button background	`#09090b`	`#ffffff`
`buttonForeground`	Floating button icon	`#fafafa`	`#09090b`
`buttonBorder`	Floating button border	`rgba(255,255,255,0.12)`	`rgba(0,0,0,0.10)`
`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