TIL 220708

오늘도 토글이지만 오늘은 다크모드 토글 !!

import { atom } from "recoil";

export const DarkThemeAtom = atom({
    key:"DarkTheme",
    default:false,
}); // atom 생성

 const [isDark,setIsDark] = useRecoilState(DarkThemeAtom);
// 헤더 컴포넌트에서 불러오기

<ModeBtn onClick={() => setIsDark((prev) => !prev)}>
     <ModeCircle/>
</ModeBtn>
  // 버튼 클릭시 상태 변경 

이제 상태에 따라 토글 배경,버튼이 변경되어야 한다 !

styled-component 를 이용하기 때문에 props 로 넘겨주었다.

<ModeBtn onClick={() => setIsDark((prev) => !prev)} isDark={isDark}>
    <ModeCircle isDark={isDark}/>
</ModeBtn>

  background-image: 
  url(${(props) => (props.isDark ? `${darkMode}` : `${lightMode}`)});