Recoil
React스러운 상태관리 라이브러리
prefers-color-scheme: dark 적용 방법
recoil.js 파일:
import {atom} from 'recoil';
export const darkModeState = atom({
key: 'darkModeState',
default:
typeof window !== 'undefined' &&
window.matchMedia('(prefers-color-scheme: dark)').matches,
});
useRecoilState 구현부 파일:
const [darkMode, setDarkMode] = useRecoilState(darkModeState);
useEffect(() => {
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
setDarkMode(mediaQuery.matches);
const handleChange = (e: any) => {
setDarkMode(e.matches);
};
mediaQuery.addEventListener('change', handleChange);
return () => {
mediaQuery.removeEventListener('change', handleChange);
};
}, [setDarkMode]);