React 앱에 다크 모드를 쉽게 추가하는 방법

앱에 대한 가장 일반적인 UX 요구 사항 중 하나는 사용자를 위해 다크 모드를 전환하는 방법을 추가하는 것입니다. React와 평범한 CSS를 사용하면 쉽게 달성할 수 있습니다! 이 글은 여러분이 React 후크에 대한 기본적인 이해가 있다고 가정합니다.

일반적으로 다양한 색상에 영향을 미치기 위해 전체 앱에서 어두운 모드 색상을 설정하려고 합니다. 표준 CSS에는 CSS variables이 있습니다. 이를 사용하여 전체 앱의 색상을 변경할 수 있습니다!

코드 따라

가장 먼저 앱의 구조를 설정해 보겠습니다.

 <div className="App">
    <header className="header">
        <h1>This is my navbar</h1>
    </header>
    <main className="main">Main content</main>
  </div>

평범하지 않은 것은 헤더와 콘텐츠뿐입니다. 이제 다크 모드 설정을 전환하는 방법을 추가해 보겠습니다. Material-UI을 빠르게 추가하여 앱을 예쁘게 만들겠습니다.

<div className="App">
  <header className="header">
        <h1>This is my navbar</h1>
  <Switch />
  </header>
  <main className="main">Main content</main>
</div>

완벽한! 이제 어두운 모드의 상태를 처리해야 합니다.

const [darkMode, setDarkMode] = React.useState(false);

  const handleChange = () => {
    setDarkMode((prevState) => !prevState);
  };


  return (
    <div className="App">
      <header className="header">
        <h1>This is my navbar</h1>
        <Switch checked={darkMode} onChange={handleChange} />
      </header>
      <main className="main">Main content</main>
    </div>
  );

설명하자면 다크 모드는 스위치로 전환하는 기본 토글 상태입니다!

다음으로, 기본 논리를 제거한 상태에서 다크 모드의 스타일을 처리할 수 있습니다. 앱, 헤더 및 기본 클래스에 CSS 변수와 다음을 추가합니다.

transition: all 500ms;

이것은 사용자를 위한 전환 유체를 만들기 위한 것입니다.

.App {
  // ..other styles
  transition: all 500ms;
  background-color: var(--bg);
}

.header {
  // ...other styles
  transition: all 500ms;
  background-color: var(--navbar);
  color: var(--color);
}

.main {
  // ...other styles
  background-color: var(--secondarybg);
  color: var(--color);
}

엄청난! 이제 남은 것은 CSS 변수를 다크 모드 상태와 연결하는 것입니다. React는 보조 효과를 수행하기 위해 useEffect 후크를 제공합니다.

 React.useEffect(() => {
    if (darkMode) {
      document.documentElement.style.setProperty("--color", "#FFFFFF");
      document.documentElement.style.setProperty("--navbar", "#333333");
      document.documentElement.style.setProperty("--bg", "#212121");
      document.documentElement.style.setProperty("--secondarybg", "#212121");
    } else {
      document.documentElement.style.setProperty("--color", "#616161");
      document.documentElement.style.setProperty("--navbar", "#FFFFFF");
      document.documentElement.style.setProperty("--bg", "#FFFFFF");
      document.documentElement.style.setProperty("--secondarybg", "#F5F5F5");
    }
  }, [darkMode]);

다크 모드 최종 구현

그리고 그게 전부입니다! 작동하는 예에서 확인해 봅시다.



앱에 다크 모드를 추가하는 데 선호하는 방법이 있습니까? 아래 댓글로 알려주세요.

자세한 내용은 Relatable Code에서 확인하세요.