diff --git a/apps/web/src/hooks/current/use-current-mode.ts b/apps/web/src/hooks/current/use-current-mode.ts
new file mode 100644
index 0000000000..04e33b4fe8
--- /dev/null
+++ b/apps/web/src/hooks/current/use-current-mode.ts
@@ -0,0 +1,16 @@
+import { atom, useAtomValue } from 'jotai';
+
+import { currentPageIdAtom, workspacePreferredModeAtom } from '../../atoms';
+
+const currentModeAtom = atom<'page' | 'edgeless'>(get => {
+  const pageId = get(currentPageIdAtom);
+  const record = get(workspacePreferredModeAtom);
+  if (pageId) return record[pageId] ?? 'page';
+  else {
+    return 'page';
+  }
+});
+
+export const useCurrentMode = () => {
+  return useAtomValue(currentModeAtom);
+};
diff --git a/apps/web/src/providers/ThemeProvider.tsx b/apps/web/src/providers/ThemeProvider.tsx
index 714b37275e..2526a9c3af 100644
--- a/apps/web/src/providers/ThemeProvider.tsx
+++ b/apps/web/src/providers/ThemeProvider.tsx
@@ -6,14 +6,12 @@ import {
   ThemeProvider as AffineThemeProvider,
 } from '@affine/component';
 import { GlobalStyles } from '@mui/material';
-import { useAtomValue } from 'jotai';
 import { ThemeProvider as NextThemeProvider, useTheme } from 'next-themes';
 import type { PropsWithChildren } from 'react';
 import type React from 'react';
 import { memo, useEffect, useMemo, useState } from 'react';
 
-import { workspacePreferredModeAtom } from '../atoms';
-import { useCurrentPage } from '../hooks/current/use-current-page-id';
+import { useCurrentMode } from '../hooks/current/use-current-mode';
 
 const ThemeInjector = memo<{
   themeStyle: AffineTheme;
@@ -40,9 +38,7 @@ const ThemeInjector = memo<{
 const ThemeProviderInner = memo<React.PropsWithChildren>(
   function ThemeProviderInner({ children }) {
     const { resolvedTheme: theme } = useTheme();
-    const currentPage = useCurrentPage();
-    const record = useAtomValue(workspacePreferredModeAtom);
-    const editorMode = currentPage ? record[currentPage.id] ?? 'page' : 'page';
+    const editorMode = useCurrentMode();
     const themeStyle = useMemo(() => getLightTheme(editorMode), [editorMode]);
     const darkThemeStyle = useMemo(
       () => getDarkTheme(editorMode),
diff --git a/packages/cli/src/dev.mjs b/packages/cli/src/dev.mjs
index 5a228ecb32..f7d05f95bd 100755
--- a/packages/cli/src/dev.mjs
+++ b/packages/cli/src/dev.mjs
@@ -52,6 +52,7 @@ const dev = await p.group(
 const env = {
   NODE_API_SERVER: dev.server,
   PATH: process.env.PATH,
+  NODE_ENV: 'development',
 };
 
 if (dev.debugBlockSuite) {