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

chore: update user setting appearance (#654)

Browse Source
This commit is contained in:
boojack
2022-12-02 20:00:34 +08:00
committed by GitHub
parent 5451fd2d2c
commit 14f9f29348
17 changed files with 134 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
web/src/hooks/useAppearance.ts
View File

@ -1,65 +0,0 @@
import { useEffect } from "react";
import { useColorScheme } from "@mui/joy/styles";
import { useAppSelector } from "../store";
import { globalService } from "../services";
const getSystemColorScheme = () => {
if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
return "dark";
} else {
return "light";
}
};
const useAppearance = () => {
const user = useAppSelector((state) => state.user.user);
const appearance = useAppSelector((state) => state.global.appearance);
const { mode, setMode } = useColorScheme();
useEffect(() => {
if (user) {
globalService.setAppearance(user.setting.appearance);
}
}, [user]);
useEffect(() => {
let mode = appearance;
if (appearance === "system") {
mode = getSystemColorScheme();
}
setMode(mode);
}, [appearance]);
useEffect(() => {
const colorSchemeChangeHandler = (event: MediaQueryListEvent) => {
const newColorScheme = event.matches ? "dark" : "light";
if (globalService.getState().appearance === "system") {
setMode(newColorScheme);
}
};
if (appearance !== "system") {
window.matchMedia("(prefers-color-scheme: dark)").removeEventListener("change", colorSchemeChangeHandler);
return;
}
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", colorSchemeChangeHandler);
return () => {
window.matchMedia("(prefers-color-scheme: dark)").removeEventListener("change", colorSchemeChangeHandler);
};
}, [appearance]);
useEffect(() => {
const root = document.documentElement;
if (mode === "dark") {
root.classList.add("dark");
} else if (mode === "light") {
root.classList.remove("dark");
}
}, [mode]);
return [appearance, globalService.setAppearance] as const;
};
export default useAppearance;

21
web/src/hooks/useMediaQuery.ts
View File

@ -1,21 +0,0 @@
import { useState, useEffect } from "react";
const useMediaQuery = (query: string) => {
const [matches, setMatches] = useState(false);
useEffect(() => {
const media = window.matchMedia(query);
if (media.matches !== matches) {
setMatches(media.matches);
}
const listener = () => {
setMatches(media.matches);
};
media.addEventListener("change", listener);
return () => media.removeEventListener("change", listener);
}, [query, matches]);
return matches;
};
export default useMediaQuery;

13
web/src/hooks/useQuery.ts
View File

@ -1,13 +0,0 @@
// A custom hook that builds on useLocation to parse
import React from "react";
import { useLocation } from "react-router-dom";
// the query string for you.
const useQuery = () => {
const { search } = useLocation();
return React.useMemo(() => new URLSearchParams(search), [search]);
};
export default useQuery;