YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-02-14 18:30:42 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: appearance and locale initial value

Browse Source
This commit is contained in:
Steven 2024-01-16 22:53:45 +08:00
parent 15e6542f0d
commit 9ffd827028
4 changed files with 19 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
web/index.html
View File

@ -10,6 +10,13 @@
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<!-- memos.metadata.head -->
<title>Memos</title>
<script>
// Prevent flash of light mode.
const appearance = localStorage.getItem("appearance");
if (appearance === `"dark"`) {
document.documentElement.classList.add("dark");
}
</script>
</head>
<body>
<div id="root"></div>

15
web/src/App.tsx
View File

@ -83,7 +83,7 @@ const App = () => {
useEffect(() => {
const { locale: storageLocale } = storage.get(["locale"]);
const currentLocale = storageLocale || userStore?.userSetting?.locale || locale;
const currentLocale = userStore.userSetting?.locale || storageLocale || locale;
i18n.changeLanguage(currentLocale);
document.documentElement.setAttribute("lang", currentLocale);
if (currentLocale === "ar") {
@ -91,17 +91,22 @@ const App = () => {
} else {
document.documentElement.setAttribute("dir", "ltr");
}
}, [locale]);
storage.set({
locale: currentLocale,
});
}, [locale, userStore.userSetting?.locale]);
useEffect(() => {
const { appearance: storageAppearance } = storage.get(["appearance"]);
let currentAppearance = (storageAppearance || userStore?.userSetting?.appearance || appearance) as Appearance;
let currentAppearance = (userStore.userSetting?.appearance || storageAppearance || appearance) as Appearance;
if (currentAppearance === "system") {
currentAppearance = getSystemColorScheme();
}
setMode(currentAppearance);
}, [appearance]);
storage.set({
appearance: currentAppearance,
});
}, [appearance, userStore.userSetting?.appearance]);
useEffect(() => {
const root = document.documentElement;

8
web/src/store/module/global.ts
View File

@ -50,12 +50,8 @@ export const initialGlobalState = async () => {
// Otherwise, use server's default locale, set to storageLocale.
const { locale: storageLocale, appearance: storageAppearance } = storage.get(["locale", "appearance"]);
defaultGlobalState.locale =
storageLocale ||
defaultGlobalState.systemStatus.customizedProfile.locale ||
defaultGlobalState.locale ||
findNearestLanguageMatch(i18n.language);
defaultGlobalState.appearance =
storageAppearance || defaultGlobalState.systemStatus.customizedProfile.appearance || defaultGlobalState.appearance;
storageLocale || defaultGlobalState.systemStatus.customizedProfile.locale || findNearestLanguageMatch(i18n.language);
defaultGlobalState.appearance = storageAppearance || defaultGlobalState.systemStatus.customizedProfile.appearance;
}
store.dispatch(setGlobalState(defaultGlobalState));
};

19
web/src/store/v1/user.ts
View File

@ -1,9 +1,6 @@
import { create } from "zustand";
import { combine } from "zustand/middleware";
import { authServiceClient, userServiceClient } from "@/grpcweb";
import storage from "@/helpers/storage";
import store from "@/store";
import { setAppearance, setLocale } from "@/store/reducer/global";
import { User, UserSetting } from "@/types/proto/api/v2/user_service";
import { UserNamePrefix, extractUsernameFromName } from "./resourceName";
@ -113,22 +110,6 @@ export const useUserStore = create(
...setting,
}),
});
const userLocale = get().userSetting?.locale;
const userAppearance = get().userSetting?.appearance;
const { locale: storedLocale, appearance: storedAppearance } = storage.get(["locale", "appearance"]);
// Use storageLocale > userLocale > default locale
const locale = storedLocale || userLocale || store.getState().global.locale;
const appearance = (storedAppearance || userAppearance || store.getState().global.appearance) as Appearance;
// If storedLocale is undefined, set storageLocale to userLocale.
if (storedLocale === undefined && storedAppearance === undefined) {
storage.set({ locale: locale });
storage.set({ appearance: appearance });
}
store.dispatch(setLocale(locale));
store.dispatch(setAppearance(appearance));
return user;
},
updateUserSetting: async (userSetting: Partial<UserSetting>, updateMask: string[]) => {