fix(electron): theme sync (#2231)

apps/web/src/components/blocksuite/workspace-header/header-right-items/theme-mode-switch/index.tsx

@@ -1,6 +1,5 @@
 import { DarkModeIcon, LightModeIcon } from '@blocksuite/icons';
 import { useTheme } from 'next-themes';
-import { useEffect } from 'react';
 
 import {
   StyledSwitchItem,
@@ -13,11 +12,6 @@ import {
 
 export const MenuThemeModeSwitch = () => {
   const { setTheme, resolvedTheme, theme } = useTheme();
-  useEffect(() => {
-    if (environment.isDesktop) {
-      window.apis?.onThemeChange(resolvedTheme === 'dark' ? 'dark' : 'light');
-    }
-  }, [resolvedTheme]);
   return (
     <StyledThemeModeContainer>
       <StyledThemeModeSwitch data-testid="change-theme-container" inMenu={true}>

apps/web/src/providers/ThemeProvider.tsx

@@ -1,10 +1,21 @@
 import type { ThemeProviderProps } from '@affine/component';
-import { ThemeProvider as NextThemeProvider } from 'next-themes';
+import { ThemeProvider as NextThemeProvider, useTheme } from 'next-themes';
 import type { PropsWithChildren } from 'react';
 import type React from 'react';
+import { memo, useEffect } from 'react';
 
 const themes = ['dark', 'light'];
 
+const DesktopThemeSync = memo(function DesktopThemeSync() {
+  const { resolvedTheme } = useTheme();
+  useEffect(() => {
+    if (environment.isDesktop) {
+      window.apis?.onThemeChange(resolvedTheme === 'dark' ? 'dark' : 'light');
+    }
+  }, [resolvedTheme]);
+  return null;
+});
+
 export const ThemeProvider = ({
   children,
   ...props
@@ -12,6 +23,7 @@ export const ThemeProvider = ({
   return (
     <NextThemeProvider themes={themes} enableSystem={true} {...props}>
       {children}
+      <DesktopThemeSync />
     </NextThemeProvider>
   );
 };