Merge pull request #460 from gofiber/codex/2025-10-11-11-36-09

Author: ReneWerner87

no-flash-color-mode-plugin.js

@@ -31,6 +31,21 @@ export default function noFlashColorModePlugin(context) {
     document.documentElement.setAttribute('data-theme', theme);
     document.documentElement.setAttribute('data-theme-choice', storedTheme || (respectPrefersColorScheme ? 'system' : defaultMode));
     document.documentElement.style.colorScheme = theme;
+    if (document.body) {
+      document.body.style.colorScheme = theme;
+    }
+
+    var observer = new MutationObserver(function() {
+      var newTheme = document.documentElement.getAttribute('data-theme');
+      if (newTheme) {
+        document.documentElement.style.colorScheme = newTheme;
+        if (document.body) {
+          document.body.style.colorScheme = newTheme;
+        }
+      }
+    });
+
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
   })();`,
           },
         ],

src/theme/Root.tsx

@@ -0,0 +1,37 @@
+import React, {type PropsWithChildren, useEffect} from 'react';
+import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
+
+function applyColorScheme(nextTheme: string | null | undefined) {
+  if (!ExecutionEnvironment.canUseDOM || !nextTheme) {
+    return;
+  }
+
+  const resolvedTheme = nextTheme === 'dark' ? 'dark' : 'light';
+  document.documentElement.style.colorScheme = resolvedTheme;
+  if (document.body) {
+    document.body.style.colorScheme = resolvedTheme;
+  }
+}
+
+export default function Root({children}: PropsWithChildren): JSX.Element {
+  useEffect(() => {
+    if (!ExecutionEnvironment.canUseDOM) {
+      return undefined;
+    }
+
+    applyColorScheme(document.documentElement.getAttribute('data-theme'));
+
+    const observer = new MutationObserver(() => {
+      applyColorScheme(document.documentElement.getAttribute('data-theme'));
+    });
+
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['data-theme'],
+    });
+
+    return () => observer.disconnect();
+  }, []);
+
+  return <>{children}</>;
+}