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

feat: change theme logic

Browse Source
This commit is contained in:
QiShaoXuan
2022-10-21 14:28:43 +08:00
parent 06657596ff
commit 27eba96f20
1 changed files with 38 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
packages/app/src/styles/themeProvider.tsx
View File

@@ -34,33 +34,49 @@ export const ThemeProvider = ({
localStorageThemeHelper.set(themeMode);
};
// ===================== A temporary solution, just use system theme and not remember the user selected ====================
useEffect(() => {
setMode(localStorageThemeHelper.get() || 'auto');
const systemThemeHelper = new SystemThemeHelper();
const systemTheme = systemThemeHelper.get();
setMode(systemTheme);
systemThemeHelper.onChange(() => {
setMode(systemThemeHelper.get());
});
}, []);
useEffect(() => {
const systemThemeHelper = new SystemThemeHelper();
const selectedThemeMode = localStorageThemeHelper.get();
setTheme(mode === 'auto' ? theme : mode);
}, [mode, setTheme, theme]);
// ===================== ====================
const themeMode = selectedThemeMode || mode;
if (themeMode === 'auto') {
setTheme(systemThemeHelper.get());
} else {
setTheme(themeMode);
}
// When system theme changed, change the theme mode
systemThemeHelper.onChange(() => {
// TODO: There may be should be provided a way to let user choose whether to
if (mode === 'auto') {
setTheme(systemThemeHelper.get());
}
});
return () => {
systemThemeHelper.dispose();
};
}, [mode]);
// useEffect(() => {
// setMode(localStorageThemeHelper.get() || 'auto');
// }, []);
//
// useEffect(() => {
// const systemThemeHelper = new SystemThemeHelper();
// const selectedThemeMode = localStorageThemeHelper.get();
//
// const themeMode = selectedThemeMode || mode;
// if (themeMode === 'auto') {
// setTheme(systemThemeHelper.get());
// } else {
// setTheme(themeMode);
// }
//
// // When system theme changed, change the theme mode
// systemThemeHelper.onChange(() => {
// // TODO: There may be should be provided a way to let user choose whether to
// if (mode === 'auto') {
// setTheme(systemThemeHelper.get());
// }
// });
//
// return () => {
// systemThemeHelper.dispose();
// };
// }, [mode]);
return (
<ThemeContext.Provider value={{ mode, changeMode, theme: themeStyle }}>