styled-component의 ThemeProvider

🌿 ThemeProvider란?

• styled-components에서 제공하는 기능으로, 전역적으로 테마를 관리하고 적용할 수 있게 해주는 컴포넌트
• React의 Context API를 기반으로 만들어져 있어, 하위 컴포넌트들에게 테마 정보를 props 형태로 전달

테마 객체 정의

src/types/themes.ts 파일 생성

export const lightTheme: Theme = {
  colors: {
    background: "#ffffff",
    text: "#000000",
    primary: "#0070f3",
  },
  fontSize: {
    small: "12px",
    medium: "16px",
    large: "20px",
  },
};

ThemeProvider로 래핑

테마를 적용할 컴포넌트에 ThemeProvider를 감싸줍니다.

import { ReactNode } from "react";
import { ThemeProvider } from "styled-components";
import useThemeStore from "@/store/useThemeStore"; // Zustand 스토어 임포트

type StyleProviderProps = {
  children: ReactNode;
};

const StyleProvider = ({ children }: StyleProviderProps): JSX.Element => {
  const { theme } = useThemeStore();

  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
};

export default StyleProvider;

styled-component에서 테마 사용

import styled from "styled-components";

export default function Home() {
  const Button = styled.button`
    background-color: ${(props) => props.theme.colors.primary};
    font-size: ${(props) => props.theme.fontSize.medium};
  `;
  return (
    <div>
      <div>여기가 홈이야?</div>
      <Button className="p-2 text-white rounded-md">테마별 버튼 테스트</Button>
    </div>
  );
}

🌿 ThemeProvider 장점

• 일관성 유지
• 유지보수 용이성
• 동적 테마 적용 : 사용자 설정에 따라 테마 동적 변경 가능(ex: 다크 모드)
• 타입 안정성 : TypeScript와 함께 사용 시, 테마 객체에 대한 타입 정의를 통해 안정성 증가
• 재사용성

🌿 ThemeProvider 단점

• 초기 설정 복잡성
• SSR 설정 : Next.js에서 SSR을 위해 추가 설정이 필요할 수 있다.

🌿 ThemeProvider 특징

• Context API 기반. Props를 통한 접근
• 중첩 테마 : ThemeProvider를 중첩 사용할 수 있어, 특정 섹션에 다른 테마를 적용할 수 있다.
• 함수형 테마 : 테마 값을 함수로 정의해 동적인 테마 적용 가능

---

사이드프로젝트를 진행하다가 다크/라이트 모드를 적용하고 싶어 알아보던 중 ThemeProvider를 알게되었습니다.

그래서 적용을 하기위해 세팅을 하던 중 내용을 정리해 두고 싶어 간단하게 정리해 보았습니다.

이후 실제로 테마를 적용하고 추가적인 작업 후 내용을 추가할 예정입니다.