MrDiderot/Michess
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

remove theme event listener on cleanup

Browse Source
This commit is contained in:
Nathaniel Tampus
2023-03-06 22:01:39 +08:00
parent 483af2c615
commit feafffe53e
1 changed files with 7 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
client/src/components/ThemeToggle.tsx
View File

@@ -7,11 +7,15 @@ export default function ThemeToggle() {
const [darkTheme, setDarkTheme] = useState(false); const [darkTheme, setDarkTheme] = useState(false);
useEffect(() => { useEffect(() => {
window const onChange = (e: MediaQueryListEvent) => changeTheme(e.matches ? "dark" : "light");
.matchMedia("(prefers-color-scheme: dark)")
.addEventListener("change", (e) => changeTheme(e.matches ? "dark" : "light")); window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", onChange);
changeTheme(window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"); changeTheme(window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
return () => {
window.matchMedia("(prefers-color-scheme: dark)").removeEventListener("change", onChange);
};
}, []); }, []);
function changeTheme(theme: "dark" | "light") { function changeTheme(theme: "dark" | "light") {