Redux를 이용하여 React 다크 모드 기능 구현하기 (with. styled-components)

styled-components를 사용하면서, createGlobalStyle를 사용하게 되었는데, 문득 이를 사용하면 손쉽게 다크 모드를 설정할 수 있지 않을까 하는 생각이 들어서 직접 다크 모드를 구현해 보았다.
🍉 전역으로 상태를 관리하기 위해서 Redux를 사용하였다.

createGlobalStyle로 글로벌 스타일 설정하기

import { createGlobalStyle } from "styled-components";
import "./font.css";

const GlobalStyle = createGlobalStyle`
  *, *::before, *::after {
        box-sizing: border-box;
    }

    body {
        margin: 0;
    	color: black;
        background-color: white;
    }

`;

export default GlobalStyle;

• createGlobalStyle를 사용하여 글로벌 스타일 컴포넌트를 만들 수 있다.

import './App.css';
import GlobalStyle from "./GlobalStyle";

const queryClient = new QueryClient();

function App() {
  return (
    <div className="App">
      <p>안녕하세요!</p>
      <GlobalStyle/>
    </div>
  );
}

export default App;

• 위와 같이 만든 글로벌 스타일을 사용할 수 있다.

전역 상태를 props로 글로벌 스타일에 조건부 스타일링하기

• GlobalStyle에 props를 주어서 조건부로 글자와 배경의 색상을 결정한다.
• 이를 위해서 redux를 사용하였다 (여기서 redux의 사용법은 생략한다)

import './App.css';
import GlobalStyle from "./GlobalStyle";
import { useSelector } from "react-redux";

const queryClient = new QueryClient();

function App() {
  const isDark = useSelector(state => state.darkmode).isDark;

  return (
    <div className="App">
      <p>안녕하세요!</p>
      <GlobalStyle isDark={isDark}/>
    </div>
  );
}

export default App;

• props에 따라서 배경과 글자의 색상이 결정되도록 한다.

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
  *, *::before, *::after {
        box-sizing: border-box;
    }

    body {
        margin: 0;
        color: ${({isDark}) => isDark ? "white" : "black"};
        background-color: ${({isDark}) => isDark ? "black" : "white"};
    }
    
    input, textarea {
        color: ${({isDark}) => isDark ? "white" : "black"};
        background-color: ${({isDark}) => isDark ? "black" : "white"};
    }

`;

export default GlobalStyle;

• input이나 textarea 등은 배경과 글자의 색상이 적용되지 않기에 따로 적용한다.

🍍 이제 dispatch를 통해서 isDark의 값을 true/false로 변경할 때 마다, 모든 글자와 배경의 색상이 변경된다.

전역 색상을 만들고, 모드에 따라 색상 변경하기

• 배경이나 글자의 색상 외에도 여러가지 색상이 쓰일 수 있고, 이 색상들이 현재 다크 모드인지 아닌지에 따라서 어울리지 않을 수도 있다.
• 이런 경우에 사용하기 위해서, CSS의 전역 색상을 만들고 현재 테마에 따라서 다른 색상이 될 수 있도록 한다.

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
  *, *::before, *::after {
        box-sizing: border-box;
    }

    body {
        margin: 0;
        color: ${({isDark}) => isDark ? "white" : "black"};
        background-color: ${({isDark}) => isDark ? "black" : "white"};
    }
    
    :root {
        --my-yellow: ${({isDark}) => isDark ? "yellowgreen" : "yellow"};
    }

`;

export default GlobalStyle;

• 위와 같이 GlobalStyle의 :root에 색상을 지정해 놓고, var(변수이름) 으로 해당 색상을 사용할 수 있다.
  🍉 ex) color: var(--my-yellow);
• 전역 스타일에 다른 값을 덮어씌우고 싶다면, !important를 사용한다.
  🍉 ex) color: purple!important;