|
import { useState, useEffect } from 'react'; |
|
|
|
export const useThemeMode = () => { |
|
|
|
const getSystemPreference = () => { |
|
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; |
|
}; |
|
|
|
|
|
const [mode, setMode] = useState(getSystemPreference); |
|
|
|
|
|
useEffect(() => { |
|
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)'); |
|
const handleChange = (e) => { |
|
setMode(e.matches ? 'dark' : 'light'); |
|
}; |
|
|
|
mediaQuery.addEventListener('change', handleChange); |
|
return () => mediaQuery.removeEventListener('change', handleChange); |
|
}, []); |
|
|
|
const toggleTheme = () => { |
|
setMode((prevMode) => (prevMode === 'light' ? 'dark' : 'light')); |
|
}; |
|
|
|
return { mode, toggleTheme }; |
|
}; |