React에서 dark모드 적용

dark모드를 적용해보면서 알게된 방법들인데 styled-components를 사용하는법도 있는데 근본적인 scss, css로 처리가 가능한 방법이 있어 이 방법을 사용할까한다.

단순히 테마색만 변경할경우

1. App.js를 최상위위치에서 APP/App.js로 이동시킨다(useState를 사용하기위함)

2. App.js에서 isDark state를 사용하여 최상위 div의 클래스에 "dark"를 추가한다

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

function App() {
  const [isDark, setIsDark] = useState(false);

  return (
    <div className={`App ${isDark ? "dark" : ""}`}>
      <div>hi</div>
      <button
        onClick={() => {
          setIsDark(!isDark);
        }}
      >
        dark!
      </button>
    </div>
  );
}

export default App;

3. app.scss를 만들어 darkColors변수에 다크모드 색상값들을 넣어준뒤
   .App.dark일때 map-get을 사용하여 darkColors변수의 value값들을 가져다가 사용한다.

$darkColors: (
  main: black,
  sub: gray,
  font: yellow,
);

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

.App.dark {
  background-color: map-get($darkColors, main);
  color: map-get($darkColors, font);
}

css변수를 사용해 전역에서 테마색 사용

아래처럼 선언하면 .dark의 유무에따라 각기 다른 값이 적용되므로
dark모드처럼 같은곳에 class에따라 여러개의 스타일이 적용되어야 한다면 이렇게 사용하는게 좋겠다

// 공통색상선언
$color-light: (
  "main": #186eef,
  "sub": #71d174,
);
$color-dark: (
  "main": #302d47,
  "sub": #d5d810,
);

// 모드별 색상
.App {
  @each $name, $color in $color-light {
    --#{$name}: #{$color};
  }
}
.App.dark {
  @each $name, $color in $color-dark {
    --#{$name}: #{$color};
  }
}
// 실제 class에 적용
.App {
  background-color: var(--main);
  color: var(--sub);
}
.App.dark {
  background-color: var(--main);
  color: var(--sub);
}

또한 css변수이므로 styled-components사용시에도 문제없이 사용된다. 그래서 컴포넌트마다 디테일하게 색상지정이 가능하다.