Ensure color scheme updates propagate after theme toggle

Author: ReneWerner87

no-flash-color-mode-plugin.js

@@ -31,11 +31,17 @@ 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;
+        }
       }
     });
 

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}</>;
+}