Light and dark themes

Automatic mode

auto is the default, so omitting data-theme works:

<div id="gabden-conversations"></div>
<script async src="https://YOUR_SITE_NAME.gabden.com/conversations.js"></script>

Gabden walks from its container toward the page root and uses the nearest visible background color. If no definite background is available, it follows prefers-color-scheme.

Auto mode watches ancestor class and style changes. When the host website changes theme, the widget re-evaluates its surroundings and switches without a reload.

Force a theme

<div id="gabden-conversations" data-theme="dark"></div>

Accepted values are auto, light, and dark. The container value takes precedence over the script value.

Switch at runtime

Change the attribute:

const conversations = document.getElementById('gabden-conversations')
conversations.dataset.theme = 'dark'
conversations.dataset.theme = 'light'
conversations.dataset.theme = 'auto'

Call the widget API:

conversations.gabdenConversations.setTheme('dark')

Or dispatch an event:

conversations.dispatchEvent(new CustomEvent('gabden:set-theme', {
  detail: { theme: 'light' }
}))

Theme-toggle integration

const conversations = document.getElementById('gabden-conversations')
const toggle = document.getElementById('site-theme-toggle')

toggle.addEventListener('click', () => {
  document.documentElement.classList.toggle('dark')
  // No Gabden call is necessary in auto mode.
})

For class-based themes, ensure the class changes the computed background of html, body, or a wrapper surrounding the conversations container.