[React] dark모드, white모드의 첫걸음

# theme
- 기본적으로 모든 색상들을 가지고 있는 object
- 모든 색깔을 하나의 object 안에 넣어놨기때문에 매우 유용하다.
  왜냐하면, 나중에 색깔을 바꿀때 그냥 그 object만 바꿔주면 된다.

 

---

index.js에서

import { ThemeProvider } from "styled-components";

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

ReactDom.render(
  <React.StrictMode>
     <ThemeProvider theme={darkTheme}>     // 여기추가
        <App />
     </ThemeProvider>                     // 여기추가
  </React.StrictMode>,
  document.getElementById("root")
);

 

그리고 app.js에서 

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

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