react로 다크모드 만들기

react, styled-components, scss를 이용하여 다크모드를 만들어봅시다.

가장 root인 app.jsx에 root css를 Import 해줍니다.

import React from "react";
import "../App.scss";

function App() {
  return <div className="background">dark mode</div>;
}

App.scss에는 흑, 백에 관련된 색을 지정합니다.

// App.scss
:root {
  --primary-color: #f05014;
  --background-color: #000;
}

.ui-dark {
  --primary-color: blue;
  --background-color: white;
}

가장 키포인트는 react의 html에 class로 dark-mode를 넣는 것입니다.

방법은 아래와 같습니다. 로컬스토리지에 bgMode가 dark이면 html 클래스에 ui-dark를 넣습니다

// app.jsx
import React from "react";
import styled from "styled-components";
import "../App.scss";

function App() {
  useEffect(() => {
    const bgMode = window.localStorage.getItem("bgMode");
    if (bgMode === "dark") {
      document.getElementsByTagName("html")[0].classList.add("ui-dark");
    }
  }, []);

  const darkOnOff = () => {
    if (
      document.getElementsByTagName("html")[0].classList.contains("ui-dark")
    ) {
      document.getElementsByTagName("html")[0].classList.remove("ui-dark");
      window.localStorage.setItem("bgMode", "light");
    } else {
      document.getElementsByTagName("html")[0].classList.add("ui-dark");
      window.localStorage.setItem("bgMode", "dark");
    }
  };

  return (
    <Background>
      <span>dark mode</span>
      <button onClick={darkonOff}>on/off darkMode</button>
    </Background>
  );
}

const Background = styled.div`
  background-color: var(--background-color);
  color: var(--primary-color);
`;

위와 같이 공통 scss에서 정의한 background-color 변수를 사용하면 html에 ui-dark 클래스가 있을 때는 background-color에 black이 들어가고 클래스가 없을 때는 background-color에 white가 들어갑니다.

이외 다른 요소들에도 root css에서 정의한 변수를 사용하면 버튼 한번에 다른 theme을 구현할 수 있습니다.

#react #css #styled-components