YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-06-05 22:09:59 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: support follow system appearance (#670)

Browse Source
This commit is contained in:
boojack
2022-12-04 12:23:29 +08:00
committed by GitHub
parent 1ea74dfd0d
commit 4767ee3293
9 changed files with 43 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
web/src/App.tsx
View File

@ -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} />