mirror of https://github.com/usememos/memos
chore: update user setting appearance (#654)
boojack
2 years ago
committed by
GitHub
parent
5451fd2d2c
commit
14f9f29348
@ -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;
|
||||
@ -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;
|
||||
@ -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;
|
||||
Loading…
Reference in New Issue