Prevent dark mode flash on page refresh (#182)

* Prevent dark mode flash on page refresh * Replace inline script with Next.js Script component
yorkie-team · Jan 2, 2025 · 2aff9f6 · 2aff9f6
1 parent fb5e41c
commit 2aff9f6
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 10 deletions.
diff --git a/hooks/useTheme.ts b/hooks/useTheme.ts
@@ -1,30 +1,33 @@
 import { useState, useEffect } from 'react';
 
 export type ThemeOption = 'system' | 'light' | 'dark';
+const applyTheme = (theme: 'light' | 'dark') => {
+  if (theme === 'light') {
+    window.document.documentElement.classList.remove('darkmode');
+    window.document.documentElement.style.colorScheme = 'light';
+  } else {
+    window.document.documentElement.classList.add('darkmode');
+    window.document.documentElement.style.colorScheme = 'dark';
+  }
+};
 export function useTheme(initialTheme?: ThemeOption) {
   const [theme, setTheme] = useState<ThemeOption | undefined>(initialTheme);
 
   useEffect(() => {
     const mediaQueryList = window.matchMedia('(prefers-color-scheme: dark)');
     const handleSystemThemeChange = (e: MediaQueryListEvent) => {
-      if (e.matches) {
-        window.document.body.classList.add('darkmode');
-      } else {
-        window.document.body.classList.remove('darkmode');
-      }
+      applyTheme(e.matches ? 'dark' : 'light');
     };
 
     if (theme === 'dark') {
-      window.document.body.classList.add('darkmode');
+      applyTheme('dark');
       window.localStorage.setItem('theme', 'dark');
     } else if (theme === 'light') {
-      window.document.body.classList.remove('darkmode');
+      applyTheme('light');
       window.localStorage.setItem('theme', 'light');
     } else if (theme === 'system') {
       window.localStorage.setItem('theme', 'system');
-      if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-        window.document.body.classList.add('darkmode');
-      }
+      applyTheme(mediaQueryList.matches ? 'dark' : 'light');
       mediaQueryList.addEventListener('change', handleSystemThemeChange);
     }
     return () => {

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -0,0 +1,27 @@
+import { Html, Head, Main, NextScript } from 'next/document';
+import Script from 'next/script';
+
+export default function Document() {
+  return (
+    <Html>
+      <Head />
+      <body>
+        <Script id="initial-theme" strategy="beforeInteractive">
+          {`
+            (function () {
+              const theme = window.localStorage.getItem('theme') || 'system';
+              const isDarkMode = theme === 'dark' ||
+                (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
+              if (isDarkMode) {
+                window.document.documentElement.classList.add('darkmode');
+                window.document.documentElement.style.colorScheme = 'dark';
+              }
+            })();
+          `}
+        </Script>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}
diff --git a/styles/base/_common.scss b/styles/base/_common.scss
@@ -129,6 +129,10 @@ a {
   @extend %visuallyhidden;
 }
 
+html {
+  background-color: var(--gray-000);
+}
+
 // color
 $palette: (
   'gray': (