Prevent dark mode flash on page refresh (#182)

Author: chacha912

index.html

@@ -31,6 +31,17 @@
       content="Yorkie Dashboard is an administrative tool that allows user to manage projects and documents."
     />
 
+    <script>
+      (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>
     <!-- Start Single Page Apps for GitHub Pages -->
     <script type="text/javascript">
       // Single Page Apps for GitHub Pages

src/App.tsx

@@ -15,7 +15,7 @@
  */
 
 import React, { useEffect } from 'react';
-import './assets/styles/style.scss'
+import './assets/styles/style.scss';
 import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
 import {
   PublicRoute,
@@ -37,12 +37,37 @@ import { DocumentDetail } from 'features/documents';
 import { selectPreferences } from 'features/users/usersSlice';
 import { TestPage, ButtonView, PopoverView, DropdownView, InputView, BreadcrumbView, ModalView } from 'test';
 
+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';
+  }
+};
+
 function App() {
   const { theme } = useAppSelector(selectPreferences);
   useEffect(() => {
-    document.body.classList.toggle('darkmode', theme.darkMode);
+    applyTheme(theme.darkMode ? 'dark' : 'light');
   }, [theme.darkMode]);
 
+  useEffect(() => {
+    const mediaQueryList = window.matchMedia('(prefers-color-scheme: dark)');
+    const handleSystemThemeChange = (e: MediaQueryListEvent) => {
+      applyTheme(e.matches ? 'dark' : 'light');
+    };
+
+    if (theme.useSystem) {
+      applyTheme(mediaQueryList.matches ? 'dark' : 'light');
+      mediaQueryList.addEventListener('change', handleSystemThemeChange);
+    }
+    return () => {
+      mediaQueryList.removeEventListener('change', handleSystemThemeChange);
+    };
+  }, [theme.useSystem]);
+
   return (
     <Router basename={import.meta.env.BASE_URL}>
       <Routes>

src/assets/styles/base/_common.scss

@@ -129,6 +129,10 @@ a {
   @extend %visuallyhidden;
 }
 
+html {
+  background-color: var(--gray-000);
+}
+
 // color
 $palette: (
   'gray': (