20220924 React에서 Dark모드 적용하기

 

Dark 모드를 적용하는 방법에는 여러가지 방법이 있는데, 

App.js에서 useState를 사용해서 css, scss로 적용하는 방법

 

1. 전역에서 사용되어야 되기 때문에 App.js에 작성하기 - useState 사용

import React, { useState } from "react";
import styled from "styled-components";
import "./app.scss";

function App() {
  const [dark, setDark] = useState(false);

  return (
    <div className={`App ${dark ? "dark" : ""}`}>
      <button
        onClick={() => {
          setDark(!dark);
        }}
      >
        다크모드
      </button>
    </div>
  );
}

export default App;

 

2. app.css에 다크모드일때 css 적용하기

.App {
  background-color: white;
  color: black;
}

.App.dark {
  background-color: black;
  color: white;
}