다크모드 적용해보기 1

💡 React 다크모드 구현하기

이번 새로운 프로젝트에서 다크모드를 적용해보려고 한다.

이전 프로젝트에서는 다른 팀원분이 다음과 같이 세팅을 했었다.

import { styled } from 'styled-components';
import tokens from '../../styles/tokens.json'

const globalTokens = tokens.global;

export const PageContainer = styled.div`
    background-color: ${(props)=>props.isDark ? globalTokens.Black.value : globalTokens.Background.value};
    width: 100vw;
    min-height: 81vh;
    display: flex;
    flex-direction: row;
    justify-content: center;
    transition: 300ms;
`

const Main = () => {
  const isDark = useSelector((state) => state.uiSetting.isDark);

  return (
    <PageContainer isDark={isDark}>
      <div>이전 프로젝트 다크모드 적용 방식</div>
    </PageContainer>
  );
};

export default Main;

전역에서 상태값을 관리하기 위해 React-redux를 통해 저장되어 있는 isDark 값을 PageContainer에 props로 전달해주면 isDark 값에 따라 background-color가 바뀌는 방식이다.

이번 프로젝트에서도 이 방식을 채택할까 고민을 했지만 이전 방식에는 다음과 같은 문제점이 있었다.

1. 컴포넌트 파일마다 PageContainer와 같이 다크모드를 적용시킬 스타일 컴포넌트에 props로 isDark값을 반복해서 전달해줘야한다.
2. 그에 따라 전역에 저장되어 있는 isDark값을 불러와야한다.

반복적으로 써줘야하는 번거로움을 어떻게 하면 줄일 수 있을까 고민해보았다.

💡 어떻게 구현할까?

ThemeProvider

찾아본 결과 Styled-Component 공식문서에 있는 ThemeProvider를 사용하면 내가 원하는 결과를 얻을 수 있을 것 같다.

이후에 직접 사용해보고 포스팅을 올리겠다.

다크모드 적용해보기 2

참고

1. Styled-Component 공식문서
   https://styled-components.com/docs/tooling#api