Skip to main content
Use this page when you want your website to control widget theme in real time.

​
How it works

Website sync requires this widget setting:
  • Theme = Auto
In Auto mode:
  • Remapdb detects your website theme.
  • It sends the resolved theme (light or dark) to the widget.
  • Widget applies it without reloading.

​
Automatic theme detection

Remapdb resolves your website theme using this priority:
  1. data-bs-theme on <html>
  2. data-bs-theme on <body>
  3. Computed color-scheme on page root
  4. Explicit theme classes (dark, light, theme-dark, theme-light, etc.)
  5. Rendered page background luminance
  6. prefers-color-scheme media query fallback

​
Programmatic control from your theme switcher

​
Option A: API call

window.RDBWidget?.setTheme('dark'); // light | dark | auto
Target a specific widget: 
window.RDBWidget?.setTheme('dark', { widgetId: 'YOUR_WIDGET_ID' });

​
Option B: Custom event

window.dispatchEvent(new CustomEvent('rdb-theme', {
  detail: { theme: 'dark' } // light | dark | auto
}));

​
Typical integration with a website theme switcher

const applyTheme = (nextTheme) => {
  document.documentElement.setAttribute('data-bs-theme', nextTheme);
  window.RDBWidget?.setTheme(nextTheme);
};

themeToggleButton.addEventListener('click', () => {
  const current = document.documentElement.getAttribute('data-bs-theme') === 'dark' ? 'dark' : 'light';
  const next = current === 'dark' ? 'light' : 'dark';
  applyTheme(next);
});

​
Debug checklist

  • Ensure widget setting is Theme = Auto.
  • Confirm your page actually exposes a theme signal (data-bs-theme, classes, or clear light/dark surface styles).
  • Enable debug logs in widget settings and inspect browser console.
  • If using custom switchers, always call window.RDBWidget.setTheme(...) after your site theme changes.