Branded theme and dark mode

Make the chat look like your app with dashboard branding delivered in the session, and follow the system theme.

Goal

The chat uses your primary colour, radius and font, and switches to dark mode with the OS.

Pieces

• Dashboard → Settings → Widget branding: primary, on-primary, surface, background, text, muted text, radius, font family, agent display name, launcher position and icon. Saved with the project and sent to every session as theme.
• SDK: KletsoTheme.fromServer(theme) as a ThemeExtension, plus KletsoTheme.dark() for the dark theme.

Code

final bootstrap = Kletso.instance.session.value;
final light = KletsoTheme.fromServer(bootstrap?.theme ?? const {});
final dark = KletsoTheme.fromServer(bootstrap?.theme ?? const {}, base: KletsoTheme.dark());

MaterialApp(
  theme: ThemeData(extensions: [light]),
  darkTheme: ThemeData(brightness: Brightness.dark, extensions: [dark]),
  themeMode: ThemeMode.system,
)

Bundled font: Plus Jakarta Sans. Use KletsoTheme.light(useHostFont: true) to inherit your app’s font instead.

Verify

• Change the primary colour in Settings; restart the app (the theme is read at bootstrap). The launcher, user bubbles and buttons follow.
• Toggle the OS to dark: bubbles, surfaces and blocks switch palettes; charts and maps keep contrast.

Notes

• Custom components are your widgets; read KletsoTheme.of(context) inside them to match.
• theme.materialTheme(hostTheme) returns a Material theme aligned with the Kletso palette if the chat runs as its own route.