|
|
|
@ -1,17 +1,18 @@
|
|
|
|
|
import { useColorScheme } from "@mui/joy";
|
|
|
|
|
import { useEffect, Suspense } from "react";
|
|
|
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
|
import { RouterProvider } from "react-router-dom";
|
|
|
|
|
import { locationService } from "./services";
|
|
|
|
|
import { globalService, locationService } from "./services";
|
|
|
|
|
import { useAppSelector } from "./store";
|
|
|
|
|
import Loading from "./pages/Loading";
|
|
|
|
|
import router from "./router";
|
|
|
|
|
import * as storage from "./helpers/storage";
|
|
|
|
|
import { useColorScheme } from "@mui/joy";
|
|
|
|
|
import { getSystemColorScheme } from "./helpers/utils";
|
|
|
|
|
|
|
|
|
|
function App() {
|
|
|
|
|
const { i18n } = useTranslation();
|
|
|
|
|
const { appearance, locale, systemStatus } = useAppSelector((state) => state.global);
|
|
|
|
|
const { setMode } = useColorScheme();
|
|
|
|
|
const { mode, setMode } = useColorScheme();
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
locationService.updateStateWithLocation();
|
|
|
|
@ -20,6 +21,15 @@ function App() {
|
|
|
|
|
};
|
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (e) => {
|
|
|
|
|
if (globalService.getState().appearance === "system") {
|
|
|
|
|
const mode = e.matches ? "dark" : "light";
|
|
|
|
|
setMode(mode);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
|
|
// Inject additional style and script codes.
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
if (systemStatus.additionalStyle) {
|
|
|
|
@ -43,18 +53,27 @@ function App() {
|
|
|
|
|
}, [locale]);
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
const root = document.documentElement;
|
|
|
|
|
if (appearance === "light") {
|
|
|
|
|
root.classList.remove("dark");
|
|
|
|
|
} else if (appearance === "dark") {
|
|
|
|
|
root.classList.add("dark");
|
|
|
|
|
}
|
|
|
|
|
setMode(appearance);
|
|
|
|
|
storage.set({
|
|
|
|
|
appearance: appearance,
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
let currentAppearance = appearance;
|
|
|
|
|
if (appearance === "system") {
|
|
|
|
|
currentAppearance = getSystemColorScheme();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
setMode(currentAppearance);
|
|
|
|
|
}, [appearance]);
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
const root = document.documentElement;
|
|
|
|
|
if (mode === "light") {
|
|
|
|
|
root.classList.remove("dark");
|
|
|
|
|
} else {
|
|
|
|
|
root.classList.add("dark");
|
|
|
|
|
}
|
|
|
|
|
}, [mode]);
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<Suspense fallback={<Loading />}>
|
|
|
|
|
<RouterProvider router={router} />
|
|
|
|
|