Sync widget theme with your website

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:

data-bs-theme on <html>
data-bs-theme on <body>
Computed color-scheme on page root
Explicit theme classes (dark, light, theme-dark, theme-light, etc.)
Rendered page background luminance
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.

​How it works

​Automatic theme detection

​Programmatic control from your theme switcher

​Option A: API call

​Option B: Custom event

​Typical integration with a website theme switcher

​Debug checklist

​Related pages