Design Systems & Dynamic Theming at Enterprise Scale

// 1. Root CSS Tokens (globals.css)
:root {
  --bg-canvas: #ffffff;
  --text-primary: #0f172a;
  --color-brand: #0284c7;
}

[data-theme='dark'] {
  --bg-canvas: #090d16;
  --text-primary: #f8fafc;
  --color-brand: #38bdf8;
}

// 2. Blocking Inline Script in app/layout.tsx (Prevents Dark Mode Flash!)
export function ThemeScript() {
  const code = `
    (function() {
      try {
        const stored = localStorage.getItem('app-theme');
        const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
        const theme = stored || (systemDark ? 'dark' : 'light');
        document.documentElement.setAttribute('data-theme', theme);
      } catch (e) {}
    })();
  `;

  return <script dangerouslySetInnerHTML={{ __html: code }} />;
}