m/portfolio
1
0
Fork 0
mirror of https://github.com/kremalicious/portfolio.git synced 2024-11-15 01:25:25 +01:00
Code Releases Activity

hook tweak

Browse Source
This commit is contained in:
Matthias Kretschmann 2021-03-13 03:51:52 +01:00
parent 487461518a
commit fedfb28241
Signed by: m
GPG Key ID: 606EEEF3C479A91F
2 changed files with 9 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/molecules/ThemeSwitch.jsx
View File

@ -25,7 +25,7 @@ ThemeToggle.propTypes = {
const ThemeToggleInput = ({ dark, toggleDark }) => (
<input
onChange={() => toggleDark(!dark)}
onChange={() => toggleDark()}
type="checkbox"
name="toggle"
value="toggle"

17
src/hooks/useDarkMode.js
View File

@ -27,6 +27,10 @@ function getDarkMode() {
export default function useDarkMode() {
const [darkMode, setDarkMode] = useState(getDarkMode)
function toggleDarkMode() {
setDarkMode(!darkMode)
}
//
// Handle system theme change events
//
@ -35,26 +39,21 @@ export default function useDarkMode() {
}, [])
useEffect(() => {
if (!isClient) return false
if (!isClient) return
const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)')
try {
// Handle Chrome & Firefox
darkModeQuery.addEventListener('change', handleChange)
} catch (addEventListenerError) {
try {
// Handle Safari
darkModeQuery.addListener('change', handleChange)
} catch (addListenerError) {
console.error(addListenerError)
}
console.error(addEventListenerError)
}
return () =>
window
.matchMedia('(prefers-color-scheme: dark)')
.removeEventListener('change', handleChange)
}, [handleChange])
return { value: darkMode, toggle: setDarkMode }
return { value: darkMode, toggle: toggleDarkMode }
}