Set meta theme color based on current theme on load to avoid flicker

viliket · viliket · commit 43a65bfa0774 · 2024-09-08T10:56:29.000+03:00
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -1,6 +1,34 @@
 import InitColorSchemeScript from '@mui/material/InitColorSchemeScript';
 import { Html, Head, Main, NextScript } from 'next/document';
 
+function InitMetaThemeColorScript(): React.ReactElement {
+  return (
+    <script
+      dangerouslySetInnerHTML={{
+        __html: `
+          (function() {
+            try {
+              const currentTheme = document.documentElement.getAttribute('data-theme');
+
+              const matchingMetaTag = document.querySelector(
+                \`meta[name="theme-color"][media*="\${currentTheme}"]\`
+              );
+              if (!matchingMetaTag) return;
+
+              const metaContentColor = matchingMetaTag.getAttribute('content');
+              if (!metaContentColor) return;
+
+              document.querySelectorAll('meta[name="theme-color"]').forEach((meta) => {
+                meta.setAttribute('content', metaContentColor);
+              });
+            } catch (_) {}
+          })();
+        `,
+      }}
+    />
+  );
+}
+
 export default function Document() {
   return (
     <Html lang="fi">
@@ -33,6 +61,7 @@ export default function Document() {
       </Head>
       <body>
         <InitColorSchemeScript attribute="data-theme" />
+        <InitMetaThemeColorScript />
         <Main />
         <NextScript />
       </body>
