> ## Documentation Index > Fetch the complete documentation index at: https://docs.remapdb.com/llms.txt > Use this file to discover all available pages before exploring further. # Sync widget theme with your website > Control widget light or dark theme from your website theme state and switcher. 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 `` 2. `data-bs-theme` on `` 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 ```js theme={null} window.RDBWidget?.setTheme('dark'); // light | dark | auto ``` Target a specific widget: ```js theme={null} window.RDBWidget?.setTheme('dark', { widgetId: 'YOUR_WIDGET_ID' }); ``` ### Option B: Custom event ```js theme={null} window.dispatchEvent(new CustomEvent('rdb-theme', { detail: { theme: 'dark' } // light | dark | auto })); ``` ## Typical integration with a website theme switcher ```js theme={null} 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. ## Related pages * [Theme and layout](/widget/branding/theme-and-layout) * [Tracking events](/widget/tracking/tracking-events)