WFDASH-WEBAPP/src/components/theme-bootstrap.tsx

import { DEFAULT_THEME_ID, THEMES } from "@/lib/themes";

/**
 * Inline script that runs in <head> before hydration.
 *
 * Reads the persisted theme id from localStorage and applies it to
 * <html> so the user never sees a flash of the default theme.
 *
 * The emitted script is self-contained; its allowlist comes from the registry.
 */
export function ThemeBootstrapScript() {
  const code = `
    (function() {
      try {
        var validIds = ${JSON.stringify(THEMES.map((t) => t.id))};
        var themeId = localStorage.getItem('wfdash-theme');
        if (validIds.indexOf(themeId) === -1) themeId = ${JSON.stringify(DEFAULT_THEME_ID)};
        var root = document.documentElement;
        root.setAttribute('data-theme', themeId);
        // Older versions stored "warm". Migrate before next-themes reads it.
        var mode = localStorage.getItem('wfdash-mode');
        if (mode && mode !== 'light' && mode !== 'dark') {
          localStorage.setItem('wfdash-mode', 'light');
        }
      } catch (e) {
        // localStorage may be blocked — fall back to the SSR-rendered theme
      }
    })();
  `;
  return <script dangerouslySetInnerHTML={{ __html: code }} />;
}