[React] 다크모드 구현하기

1. 필요한 패키지 설치하기

npx create-react-app {app 이름}

새로운 react app을 생성하도록 한다.

npm install --save styled-components
npm install --save styled-reset
npm install --save react-router-dom
npm install react-icons

• styled-components : createGlobalStyle를 사용하기 위해 설치해준다.
  • createGlobalStyle : 글로벌 스타일 적용을 도와주는 styled-components내장 메서드이다.
• styled-reset : styled-components와 연결되어, 여러 브라우저마다 기본적으로 설치되어 있는 스타일을 지워주는 Node.js 패키지이다.
• react-router-dom : react에서 웹을 만들기 위해 설치해야 하는 패키지이다.
• react-icons : react-icons에서 제공해주는 아이콘을 사용하기 위해 필요한 패키지이다.

2. 폴더 셋팅하기

셋팅 폴더

하나의 폴더에 세개의 파일을 만들어준다.

반응형

3. 파일 셋팅하기

1) darkmode/theme.js

export const darkTheme = {
    color: '#ffffff',
    bgColor: '#202020',
    boxShadow: 'none',
    border: '1px solid #505050',
  };
  
  export const lightTheme = {
    color: '#000000',
    bgColor: '#ffffff',
    boxShadow: '0 0 10px -3px #a0a0a0',
    border: 'none',
  };

라이트 모드와 다크 모드 두개의 css를 생성해준다.

2) darkmode/GlobalStyle.js

import { createGlobalStyle } from "styled-components"; 
import reset from "styled-reset";

export const GlobalStyle = createGlobalStyle`
	${reset}
  
	* {
	  box-sizing: border-box;
  }

	body {
    background-color: ${(props) => props.theme.bgColor};
      color: ${(props) => props.theme.color};
  }
`;

• createGlobalStyle : 다크모드 애플리케이션의 배경화면 및 폰트 색상 변경을 글로벌스타일로 한번에 관리해줄 수 있다.
• styled-reset : 위에서 설명한 것처럼 style을 reset시켜줄 수 있다.

themeProvider

styled-components의 공식문서에서 테마 구성을 위한 요소로 ThemeProvider를 제공하고 있다. context를 사용해서 모든 리액트 컴포넌트에게 theme 속성을 전달하는 역할을 수행한다고 말한다.

여기서 context는 리액트에서 상태관리를 redux, react-query 등으로 한다. 그런데 context로 하면 간단하게 컴포넌트에서 데이터를 주고 받는 것이 가능하다. 제약이 존재하니, 상태관리 라이브러리로 하는 것이 더 편하다.

루트에 ThemeProvider가 있다면, 트리의 자식들은 theme속성을 가지게 된다. 그래서 ThemeProvider의 theme에 전달해준 테마를 darkTheme, lightTheme를 만들고, toggle 버튼에 의해 모드를 바꾸어 모드에 해당하는 테마를 불러와 적용시켜준다.

App.js

import React, { useState } from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import { darkTheme, lightTheme } from "./darkmode/theme";
import { ThemeProvider } from "styled-components";
import { GlobalStyle } from "./darkmode/GlobalStyle";
import Home from "./Home";

function App() {
  const [isDarkMode, setIsDarkMode] = useState(false);

  const toggleDarkMode = () => {
    setIsDarkMode((prev) => !prev);
  };

  return (
    <Router>
      <ThemeProvider theme={isDarkMode ? darkTheme : lightTheme}>
        <GlobalStyle />
        <Home isDarkMode={isDarkMode} toggleDarkMode={toggleDarkMode} />
      </ThemeProvider>
    </Router>
  );
}

export default App;

• isDarkMode : useState값을 주어 false일 때 lightTheme를 적용하고, true일 때는 darkTheme를 적용하게 한다.
• toggleDarkMode : 모드를 변경하게 해준다.
• ThemeProvider : theme.js에서 가져온 theme에 모드 여부에 따라 darkTheme, lightTheme로 변화되게 한다.
• Home : Home.js에 값에 따라 아이콘 변경을 하기위해서 값들을 넘겨준다.

Home.js

import React from 'react';
import styled from 'styled-components';
import { BsFillSunFill, BsFillMoonFill } from 'react-icons/bs';
import './Home.css'

const Header = styled.div`
  box-shadow: ${(props) => props.theme.boxShadow};
  border-bottom: ${(props) => props.theme.border};
`;

function Home({ isDarkMode, toggleDarkMode }) {
  return (
    <>
      <Header>
        <div className='darkmode'>
          <p>{isDarkMode ? 'DARKMODE' : 'LIGHTMODE'}</p>
          <p className='hover' onClick={() => toggleDarkMode()}>
            {isDarkMode ? <BsFillSunFill /> : <BsFillMoonFill />}
          </p>
        </div>
      </Header>
      <div>현재 Mode는  
        {isDarkMode ? ' 다크' : ' 라이트'}
        모드입니다. 
      </div>
    </>
  );
}

export default Home;

Home에서는 isDarkMode, toggleDarkMode값을 받아왔으므로

• App.js에 있는 toggleDarkMode를 클릭시에 변화를 주어 루트에 theme속성을 변화를 준다.
• 그리고 theme속성이 변하면 그에 맞춰 darkmode, lightmode로 변경이 되도록 한다.
• 아이콘도 그에 맞게 변한다.

실행결과

다크모드 구현화면

🔗 참고

https://wonit.tistory.com/366

https://velog.io/@heekang/React-다크모드를-적용해보자

https://velog.io/@gparkkii/reactdarkmode