Theming

DocQA 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.