Theming

Webnav.ai supports light and dark themes, plus CSS variable overrides for brand customization.

Setting the Theme

Use the data-theme attribute:

<!-- Light theme (default) -->
<script src="https://widget.webnav.ai/widget/chat-widget.js" data-base-url="https://yoursite.com" data-theme="light"></script>

<!-- Dark theme -->
<script src="https://widget.webnav.ai/widget/chat-widget.js" data-base-url="https://yoursite.com" data-theme="dark"></script>

Theme Behavior

Value	Description
light	White background, dark text (default)
dark	Dark background, light text

If data-theme is omitted, the widget defaults to light.

CSS Variable Overrides

You can customize the widget appearance by overriding CSS variables in your stylesheet:

:root {
	/* Primary brand color */
	--docqa-primary: #4f46e5;
	/* Chat bubble background */
	--docqa-bubble-bg: #4f46e5;
	/* Message background */
	--docqa-msg-bg: #f3f4f6;
	/* Font family */
	--docqa-font: 'Inter', sans-serif;
	/* Border radius */
	--docqa-radius: 12px;
}

Dark Mode Integration

If your site already has dark mode, set data-theme dynamically:

<script>
	const theme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
	document.querySelector('[data-base-url]')?.setAttribute('data-theme', theme);
</script>

Or use a MutationObserver to track theme changes in real time.