diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 031ef59d08..4bda97e6c9 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -14,19 +14,27 @@ const Home: NextPage = () => {
     <div>
       <Button>A button use the theme styles</Button>
       <simple-counter name="A counter created by web component" />
+      <p>current mode {mode}</p>
       <button
         onClick={() => {
-          changeMode(mode === 'dark' ? 'light' : 'dark');
+          changeMode('light');
         }}
       >
-        current theme mode :{mode}(click to change)
+        light
+      </button>
+      <button
+        onClick={() => {
+          changeMode('dark');
+        }}
+      >
+        dark
       </button>
       <button
         onClick={() => {
           changeMode('auto');
         }}
       >
-        click to set "auto" mode
+        auto
       </button>
     </div>
   );
diff --git a/src/styles/themeProvider.tsx b/src/styles/themeProvider.tsx
index 1aa488e380..95187d3415 100644
--- a/src/styles/themeProvider.tsx
+++ b/src/styles/themeProvider.tsx
@@ -12,7 +12,7 @@ import {
   ThemeProviderValue,
 } from './types';
 import { lightTheme, darkTheme, globalThemeConstant } from './theme';
-import { SystemTheme, localStorageThemeMode } from '@/styles/utils';
+import { SystemThemeHelper, localStorageThemeHelper } from './utils';
 
 export const ThemeContext = createContext<ThemeProviderValue>({
   mode: 'light',
@@ -31,30 +31,34 @@ export const ThemeProvider = ({
   const changeMode = (themeMode: ThemeMode) => {
     themeMode !== mode && setMode(themeMode);
     // Remember the theme mode which user selected for next time
-    localStorageThemeMode.set(themeMode);
+    localStorageThemeHelper.set(themeMode);
   };
 
   useEffect(() => {
-    const systemTheme = new SystemTheme();
-    const selectedThemeMode = localStorageThemeMode.get();
+    setMode(localStorageThemeHelper.get() || 'auto');
+  }, []);
+
+  useEffect(() => {
+    const systemThemeHelper = new SystemThemeHelper();
+    const selectedThemeMode = localStorageThemeHelper.get();
 
     const themeMode = selectedThemeMode || mode;
     if (themeMode === 'auto') {
-      setTheme(systemTheme.get());
+      setTheme(systemThemeHelper.get());
     } else {
       setTheme(themeMode);
     }
 
     // When system theme changed, change the theme mode
-    systemTheme.onChange(() => {
+    systemThemeHelper.onChange(() => {
       // TODO: There may be should be provided a way to let user choose whether to
       if (mode === 'auto') {
-        setTheme(systemTheme.get());
+        setTheme(systemThemeHelper.get());
       }
     });
 
     return () => {
-      systemTheme.dispose();
+      systemThemeHelper.dispose();
     };
   }, [mode]);
 
diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
new file mode 100644
index 0000000000..cf6f6acd99
--- /dev/null
+++ b/src/styles/utils/index.ts
@@ -0,0 +1,2 @@
+export * from './systemThemeHelper';
+export * from './localStorageThemeHelper';
diff --git a/src/styles/utils/localStorageThemeHelper.ts b/src/styles/utils/localStorageThemeHelper.ts
new file mode 100644
index 0000000000..4aee8eca0f
--- /dev/null
+++ b/src/styles/utils/localStorageThemeHelper.ts
@@ -0,0 +1,13 @@
+import { ThemeMode } from '../types';
+
+export class LocalStorageThemeHelper {
+  name = 'Affine-theme-mode';
+  get = (): ThemeMode | null => {
+    return localStorage.getItem(this.name) as ThemeMode | null;
+  };
+  set = (mode: ThemeMode) => {
+    localStorage.setItem(this.name, mode);
+  };
+}
+
+export const localStorageThemeHelper = new LocalStorageThemeHelper();
diff --git a/src/styles/utils.ts b/src/styles/utils/systemThemeHelper.ts
similarity index 61%
rename from src/styles/utils.ts
rename to src/styles/utils/systemThemeHelper.ts
index dd04d4fb0b..1c26cf8d4f 100644
--- a/src/styles/utils.ts
+++ b/src/styles/utils/systemThemeHelper.ts
@@ -1,6 +1,6 @@
-import { Theme, ThemeMode } from '@/styles/types';
+import { Theme } from '../types';
 
-export class SystemTheme {
+export class SystemThemeHelper {
   media: MediaQueryList = window.matchMedia('(prefers-color-scheme: light)');
   eventList: Array<(e: Event) => void> = [];
   eventHandler = (e: Event) => {
@@ -27,15 +27,3 @@ export class SystemTheme {
     this.media.removeEventListener('change', this.eventHandler);
   };
 }
-
-export class LocalStorageThemeMode {
-  name = 'Affine-theme-mode';
-  get = (): ThemeMode | null => {
-    return localStorage.getItem(this.name) as ThemeMode | null;
-  };
-  set = (mode: ThemeMode) => {
-    localStorage.setItem(this.name, mode);
-  };
-}
-
-export const localStorageThemeMode = new LocalStorageThemeMode();