feat: impl part of dark mode

This commit is contained in:
Steven
2023-09-12 22:35:17 +08:00
parent 908f95772d
commit 75d152922e
8 changed files with 225 additions and 24 deletions

View File

@ -1,3 +1,4 @@
import { useColorScheme } from "@mui/joy";
import { isEqual } from "lodash-es";
import { useEffect } from "react";
import { useTranslation } from "react-i18next";
@ -8,6 +9,7 @@ import useUserStore from "../stores/v1/user";
const Root: React.FC = () => {
const navigate = useNavigate();
const { i18n } = useTranslation();
const { setMode } = useColorScheme();
const userStore = useUserStore();
const currentUser = userStore.getCurrentUser();
const currentUserSetting = userStore.getCurrentUserSetting();
@ -30,17 +32,25 @@ const Root: React.FC = () => {
return;
}
if (isEqual(currentUserSetting.locale, "LOCALE_EN")) {
i18n.changeLanguage("en");
} else if (isEqual(currentUserSetting.locale, "LOCALE_ZH")) {
if (isEqual(currentUserSetting.locale, "LOCALE_ZH")) {
i18n.changeLanguage("zh");
} else {
i18n.changeLanguage("en");
}
if (isEqual(currentUserSetting.colorTheme, "COLOR_THEME_DARK")) {
setMode("dark");
document.documentElement.classList.add("dark");
} else {
setMode("light");
document.documentElement.classList.remove("dark");
}
}, [currentUserSetting]);
return (
<>
{isInitialized && (
<div className="w-full h-auto flex flex-col justify-start items-start">
<div className="w-full h-auto flex flex-col justify-start items-start dark:bg-zinc-800">
<Header />
<Outlet />
</div>