[React]styled-component 를 이용한 theme

                        dark mode                         light mode

 

styled components를 이용하면 테마를 이렇게 바꾸는 것이 가능하다

 

 

 

//Index.js

import React from "react";
import ReactDOM from "react-dom";
import { ThemeProvider } from "styled-components";
import App from "./App";

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

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

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

 

 

import { ThemeProvider } from "styled-components"

import { ThemeProvider } from "styled-components";

    ->     먼저 { ThemeProvider }를 import해준다 

 

그리고 <ThemeProvider>  </ThemeProvider>로 적용할 부분은 감싸주고

 

하나의 prop이 필요한데  그게 theme라는 prop이다

 

<ThemeProvider theme={lightTheme}> </ThemeProvider> 

그리고 위 theme의 이름이 바뀌면서 모드의 색상들은 바뀌게 된다.

 

 

그리고 아래처럼 어떤 모드일 때 어떤 색상 디자인을 할지 object를 만들어준다

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

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

주의할 점!!! property의 이름이 같을 것!!!!

 

---

//App.js

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

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

const Wrapper = styled.div`
  display: flex;
  height: 100vh;
  width: 100vw;
  justify-content: center;
  align-items: center;
  background-color: ${(props) => props.theme.backgroundColor};
`;

function App() {
  return (
    <Wrapper>
      <Title>hello</Title>
    </Wrapper>
  );
}

export default App;

그리고 color, backgroundColor 등 위처럼 작성하면 theme에 따라 색상은 바뀌게 된다.

 

 color: ${(props) => props.theme.textColor};

 

 background-color: ${(props) => props.theme.backgroundColor};

 

 

 

<ThemeProvider theme={lightTheme}> </ThemeProvider> 

그리고 위 theme의 이름이 바뀌면서 다크 모드, 라이트 모드 등으로 바꿀 수 있다