71 lines
1.7 KiB
TypeScript
71 lines
1.7 KiB
TypeScript
//
|
|
// adapted from
|
|
// https://github.com/daveschumaker/react-dark-mode-hook/blob/master/useDarkMode.js
|
|
//
|
|
import { useState, useEffect, useCallback } from 'react'
|
|
|
|
const isClient = typeof window === 'object'
|
|
|
|
function getDarkMode() {
|
|
// if (localStorage.getItem('theme') === 'dark') {
|
|
// return true
|
|
// } else if (localStorage.getItem('theme') === 'light') {
|
|
// return false
|
|
// }
|
|
|
|
if (
|
|
isClient &&
|
|
window.matchMedia &&
|
|
window.matchMedia('(prefers-color-scheme: dark)').matches
|
|
) {
|
|
return true
|
|
} else {
|
|
return false
|
|
}
|
|
}
|
|
|
|
export default function useDarkMode() {
|
|
const [darkMode, setDarkMode] = useState(getDarkMode())
|
|
const [themeColor, setThemeColor] = useState<string>()
|
|
|
|
const toggleDarkMode = useCallback(() => {
|
|
setDarkMode(!darkMode)
|
|
}, [darkMode])
|
|
|
|
//
|
|
// Do things when darkMode changes
|
|
//
|
|
useEffect(() => {
|
|
const bodyClassList = document.body.classList
|
|
bodyClassList.toggle('dark')
|
|
bodyClassList.toggle('light')
|
|
setThemeColor(darkMode === true ? '#1d2224' : '#e7eef4')
|
|
}, [darkMode])
|
|
|
|
//
|
|
// Handle system theme change events
|
|
//
|
|
const handleChange = useCallback(() => {
|
|
setDarkMode(getDarkMode())
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
if (!isClient) return
|
|
|
|
const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)')
|
|
|
|
try {
|
|
darkModeQuery.addEventListener('change', handleChange)
|
|
} catch (addEventListenerError) {
|
|
console.error(addEventListenerError)
|
|
}
|
|
|
|
return () =>
|
|
window
|
|
.matchMedia('(prefers-color-scheme: dark)')
|
|
.removeEventListener('change', handleChange)
|
|
}, [handleChange])
|
|
|
|
return { value: darkMode, toggle: toggleDarkMode, themeColor }
|
|
}
|