personal website
nekomimi.pet
1import { useState, useEffect } from "react"
2
3export function useSystemTheme() {
4 const [isLightMode, setIsLightMode] = useState(false)
5
6 useEffect(() => {
7 const mediaQuery = window.matchMedia("(prefers-color-scheme: light)")
8
9 const handleChange = (e: MediaQueryListEvent) => {
10 const isLight = e.matches
11 setIsLightMode(isLight)
12
13 // Apply or remove the 'dark' class on the document element
14 if (isLight) {
15 document.documentElement.classList.remove('dark')
16 } else {
17 document.documentElement.classList.add('dark')
18 }
19 }
20
21 const isLight = mediaQuery.matches
22 setIsLightMode(isLight)
23
24 // Apply or remove the 'dark' class on initial load
25 if (isLight) {
26 document.documentElement.classList.remove('dark')
27 } else {
28 document.documentElement.classList.add('dark')
29 }
30
31 mediaQuery.addEventListener("change", handleChange)
32
33 return () => mediaQuery.removeEventListener("change", handleChange)
34 }, [])
35
36 return isLightMode
37}