[React + TypeScript + Firebase] 식단어때(How-about-the-diet) 테마 기능 추가

✨ 테마 기능 추가 결과물

https://www.youtube.com/watch?v=EcK13z1zv7E&list=PLR8FoyenzZ0W097_SdzTomj8VL4s6R_nY&index=9

 

 

 

 

---

🥒 Light & Dark 모드 테마 변경

💡 Context API를 통해 테마 기능 코드 구현
💡 localStorage 이용하여 새로고침 시, 현재 적용되어 있는 테마 적용
💡useContext()를 통해 색 변경이 필요한 각 파일에 적용

 

 

 

🌽 상태값 기본 설정

const [isDarkMode, setIsDarkMode] = useState<boolean>(() => {
  const localTheme = localStorage.getItem('theme')
  return localTheme ? JSON.parse(localTheme) : true
})

✅ 테마의 상태값을 기본 설정할 때, 만약 localStorage에 'theme'의 값이 있을 경우,
parse를 통해 파싱 해서 값을 boolean으로 변경하여 가져오고, 없다면 기본값을 true로 설정

 

 

 

🫑 상태값 변경 저장

useEffect(() => {
  localStorage.setItem('theme', JSON.stringify(isDarkMode))
}, [isDarkMode])

✅ isDarkMode의 상태값이 변경될 때마다 useEffect()를 통해 theme의 값을 localStorage에 저장

 

 

 

🥑 Context 생성

export const ThemeContext = createContext<ThemeContextType>({
  isDarkMode: false,
  toggleTheme: () => {}
})

✅ isDarkMode와 toggleTheme(테마 변경 버튼)을 포함하는 Context 객체인 ThemeContext 선언 

 

 

 

🥬 자식 컴포넌트에 데이터 제공

return (
  <ThemeContext.Provider value={{ isDarkMode, toggleTheme }}>
    {props.children}
  </ThemeContext.Provider>
)

✅ Context API를 사용하여 ThemeContext.Provider를 통해 자식 컴포넌트에 테마 데이터를 제공

 

 

 

 

---

👋🏻 마무리

'식단어때'에 추가 기능을 구현할 때, 테마 변경 기능을 제일 먼저 추가하고 싶었다. 
테마 모드가 Light와 Dark로 총 2가지가 있어, '식단어때'의 사이트가 2개인 느낌이 들었기 때문에 단순한 이유로 결과물을 빨리 확인하고 싶었다.. 🥹
역시 CSS는 어렵고도 신비하다.. 적용하기도 너무 힘들고 😂
그래도 테마 기능까지 추가하니 뿌듯하다 🙌🏻