From 1b12972afd5db2e1c772757f4d3d6f31b5297115 Mon Sep 17 00:00:00 2001
From: Himself65 <himself65@outlook.com>
Date: Thu, 4 May 2023 21:00:05 -0500
Subject: [PATCH] fix(electron): theme sync (#2231)

---
 .../header-right-items/theme-mode-switch/index.tsx |  6 ------
 apps/web/src/providers/ThemeProvider.tsx           | 14 +++++++++++++-
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/components/blocksuite/workspace-header/header-right-items/theme-mode-switch/index.tsx b/apps/web/src/components/blocksuite/workspace-header/header-right-items/theme-mode-switch/index.tsx
index ccccc35ec2..a957adf491 100644
--- a/apps/web/src/components/blocksuite/workspace-header/header-right-items/theme-mode-switch/index.tsx
+++ b/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}>
diff --git a/apps/web/src/providers/ThemeProvider.tsx b/apps/web/src/providers/ThemeProvider.tsx
index cf0e10d41c..ad4f5ae529 100644
--- a/apps/web/src/providers/ThemeProvider.tsx
+++ b/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>
   );
 };