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: dark mode support for auth page (#569)

Browse Source 
* feat: dark mode support for auth page

* chore: update
This commit is contained in:
Stephen Zhou
2022-11-26 11:20:22 +08:00
committed by GitHub
parent 2d5d734da4
commit 90c85103c3
8 changed files with 111 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
web/src/hooks/useApperance.ts Normal file
View File

@ -0,0 +1,28 @@
import { useEffect } from "react";
import { useColorScheme } from "@mui/joy/styles";
import { APPERANCE_OPTIONS, APPERANCE_OPTIONS_STORAGE_KEY } from "../helpers/consts";
import useLocalStorage from "./useLocalStorage";
export type Apperance = typeof APPERANCE_OPTIONS[number];
const useApperance = () => {
const [apperance, setApperance] = useLocalStorage<Apperance>(APPERANCE_OPTIONS_STORAGE_KEY, APPERANCE_OPTIONS[0]);
const { setMode } = useColorScheme();
useEffect(() => {
const root = document.documentElement;
if (apperance === "dark" || (apperance === "auto" && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
root.classList.add("dark");
setMode("dark");
} else {
root.classList.remove("dark");
setMode("light");
}
}, [apperance]);
return [apperance, setApperance] as const;
};
export default useApperance;