diff --git a/frontend/appflowy_web_app/src/components/app/useAppThemeMode.ts b/frontend/appflowy_web_app/src/components/app/useAppThemeMode.ts
index 6f90968590..69823f0a2f 100644
--- a/frontend/appflowy_web_app/src/components/app/useAppThemeMode.ts
+++ b/frontend/appflowy_web_app/src/components/app/useAppThemeMode.ts
@@ -9,7 +9,11 @@ export const ThemeModeContext = createContext<
 >(undefined);
 
 export function useAppThemeMode() {
-  const [isDark, setIsDark] = useState<boolean>(false);
+  const [isDark, setIsDark] = useState<boolean>(() => {
+    const darkMode = localStorage.getItem('dark-mode');
+
+    return darkMode === 'true';
+  });
 
   useEffect(() => {
     function detectColorScheme() {
@@ -28,6 +32,7 @@ export function useAppThemeMode() {
 
   useEffect(() => {
     document.documentElement.setAttribute('data-dark-mode', isDark ? 'true' : 'false');
+    localStorage.setItem('dark-mode', isDark ? 'true' : 'false');
   }, [isDark]);
 
   return {