Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-14 13:25:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(electron): theme sync (#2231)

Browse Source
This commit is contained in:
Himself65
2023-05-04 21:00:05 -05:00
committed by GitHub
parent 33c48eed79
commit 1b12972afd
2 changed files with 13 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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}>

14
apps/web/src/providers/ThemeProvider.tsx
View File

@@ -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>
);
};