[React_study] styled-components를 이용한 dark/light모드

* Theme를 이용한 dark/light모드 만들기

• index.js파일에 기본 셋팅을 해준다.
• darkTheme와 lightTheme를 만들어준다.
  • property의 네이밍은 두 객체 모두 동일하게 만들어 주어야 한다.
• ThemeProvider를 통해서 App을 감싸준다.
• 그러면 App컴포넌트 모든곳에서 theme이 사용가능해진다.
• theme이 props로 전달해주는 객체에 따라서 dark/light모드가 변경이 된다.

// index.js

import { ThemeProvider } from "styled-components";

const darkTheme = {
  textColor: "whitesmoke",
  backgroundColor: "#111",
};

const lightTheme = {
  textColor: "#111",
  backgroundColor: "#whitesmoke",
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <ThemeProvider theme={darkTheme}>
      <App />
    </ThemeProvider>
  </React.StrictMode>
);

 

* props를 이용하여서 property들을 가져와준다.

const Title = styled.h1`
  color: ${(props) => props.theme.textColor};
`;

const Body = styled.div`
  background-color: ${(props) => props.theme.backgroundColor};
`