[React] theme 사용하여 다크모드 만들기

theme 이란 , 기본적으로 모든 색상들을 가지고 있는 object를 의미한다.

index.js 파일에

import { ThemeProvider } from "styled-components";

ThemeProvider helper를 입력한다.

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

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

dark모드와 light 모드전환을 위해 두가지 component를 만든다.

ReactDOM.render(
  <React.StrictMode>
    <ThemeProvider theme={darkTheme}>
      <App /> {/*ThemeProvider 안에 있는 모든 component들이 theme object에 접근 할 수 있게 된다 */}
    </ThemeProvider>
    
  </React.StrictMode>,
  document.getElementById('root')
);

ThemeProvider component안에 App component를 넣어줘서 App component가 theme object에 접근할 수 있게 한다.
이말이 무슨말이냐? Theme.js 파일을 살펴보겠다.

import React from 'react';
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;

Theme.js 파일에서 props로 theme.textColor에 접근할 수 있다. 우리의 h1과 div 태그의 요소들은 어떤 색상인지 직접 명시할 필요가 전혀없다.
웹브라우저 화면을 보여주면

만약 index.js파일에서

<ThemeProvider theme={lightTheme}>

바꿔준다면 우리의 웹은

자동으로 바껴있을 것이다.

앞으로의 포스팅은 typescript를 이용하여 이를 더 쉽게 제어할 수 있는 방법에 대하여 쓰겠다.