Skip to main content

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​

Most documentation frameworks (Docusaurus, MkDocs Material, VitePress) set data-theme automatically when the user toggles dark mode — no additional configuration needed. The widget follows along in real time.

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.