styled-components에서 import하는 ThemeProvider

styled-components와 더 친해지기 위해 ThemeProvider를 이용해서 다크모드 예제를 만들어봤다.

---

🔻 theme.js

export const dark = {
    colors: {
        titleColor: "#fff",
        bgColor: "#232332",
    }
}
export const light = {
    colors: {
        titleColor: "#232332",
        bgColor: "#fff",
    }
}

• 다크모드일 때, 라이트모드일 때 텍스트 컬러와 배경 컬러를 지정해준다.
  
  

import styled, { ThemeProvider } from "styled-components";

• styled-components에서 ThemeProvider를 import 해준다.

🔻 App.jsx

<import { light,dark } from "./theme";

<ThemeProvider theme={theme}>
      <MainContainer>
        <Button
          title={theme === dark ? "라이트 모드" : "다크 모드"}
          onclick={toggleTheme}
        />
      </MainContainer>
    </ThemeProvider>

• ThemeProvider를 최상위로 두어 나머지 컴포넌트들을 감싸준다.
• theme.js에서 작성했던 light, dark 모드 테마를 import 해준다.
• 최상위 부모가 theme을 가지고 있기 때문에 sc에서 props로 접근이 가능하다!

출처: https://velog.io/@leeseooo/React-ThemeProvider

[React] ThemeProvider랑 친해지기