Dark mode

To enable dark mode in the Biel.ai chat widget, set data-theme="dark" on your site's <html> tag. The widget detects the attribute and switches automatically, so it always matches your site's active theme.

Automatic theme switching

The widget follows changes to data-theme in real time. If your framework uses a different theme attribute or class, synchronize its theme with data-theme on <html>. Setting another framework's theme alone does not change the widget palette.

Force dark mode permanently

If your site is always dark, add the attribute statically:

<html data-theme="dark">

The widget renders in dark mode for every visitor, regardless of their system's prefers-color-scheme setting.

Customize dark mode colors

Dark mode uses the widget's default dark palette. To adjust individual colors (background, text, buttons), override the --biel-* CSS variables — see Styles for the full variable list.