Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-17 06:16:59 +08: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); localStorageThemeHelper.set(themeMode);
}; };
// ===================== A temporary solution, just use system theme and not remember the user selected ====================
useEffect(() => { useEffect(() => {
setMode(localStorageThemeHelper.get() || 'auto'); const systemThemeHelper = new SystemThemeHelper();
const systemTheme = systemThemeHelper.get();
setMode(systemTheme);
systemThemeHelper.onChange(() => {
setMode(systemThemeHelper.get());
});
}, []); }, []);
useEffect(() => { useEffect(() => {
const systemThemeHelper = new SystemThemeHelper(); setTheme(mode === 'auto' ? theme : mode);
const selectedThemeMode = localStorageThemeHelper.get(); }, [mode, setTheme, theme]);
// ===================== ====================
const themeMode = selectedThemeMode || mode; // useEffect(() => {
if (themeMode === 'auto') { // setMode(localStorageThemeHelper.get() || 'auto');
setTheme(systemThemeHelper.get()); // }, []);
} else { //
setTheme(themeMode); // useEffect(() => {
} // const systemThemeHelper = new SystemThemeHelper();
// const selectedThemeMode = localStorageThemeHelper.get();
// When system theme changed, change the theme mode //
systemThemeHelper.onChange(() => { // const themeMode = selectedThemeMode || mode;
// TODO: There may be should be provided a way to let user choose whether to // if (themeMode === 'auto') {
if (mode === 'auto') { // setTheme(systemThemeHelper.get());
setTheme(systemThemeHelper.get()); // } else {
} // setTheme(themeMode);
}); // }
//
return () => { // // When system theme changed, change the theme mode
systemThemeHelper.dispose(); // systemThemeHelper.onChange(() => {
}; // // TODO: There may be should be provided a way to let user choose whether to
}, [mode]); // if (mode === 'auto') {
// setTheme(systemThemeHelper.get());
// }
// });
//
// return () => {
// systemThemeHelper.dispose();
// };
// }, [mode]);
return ( return (
<ThemeContext.Provider value={{ mode, changeMode, theme: themeStyle }}> <ThemeContext.Provider value={{ mode, changeMode, theme: themeStyle }}>