[React] 리액트로 다크 모드 구현하기

리액트로 다크 모드를 구현하는 것은 useTheme을 사용하면 돼서 생각보다 간단했다.

나는 리액트 코드를 짤 때 page와 style 코드를 분리하는데, page 코드에 다크모드 선언을 해두고 옵션만 달아주면 style 코드에서 다크 모드 on/off 스타일을 설정만 하면 돼서 간편했다.

물론 모든 줄에 옵션을 달아야 하는 게 귀찮았지만 할 만 했다.

import { useTheme } from "../contexts/ThemeContext";

const { isDarkMode } = useTheme();

 isDarkMode={isDarkMode}

color: ${(props) => (props.isDarkMode ? "#fff" : "#3D3A3A")};

background-image: url(${(props) =>
    props.isDarkMode ? "/images/RecBtn.svg" : "/images/lightRecBtn.svg"});

 background: ${(props) =>
    props.isDarkMode
      ? "#121212"
      : "linear-gradient(0deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.45) 100%), linear-gradient(180deg, #e2d5f3 8.5%, #dcd3e8 17%, #d9d2e2 21.25%, #e8e8e8 67%, #fff 100%)"};