どのように簡単に反応アプリにダークモードを追加する

アプリケーションの最も一般的なUXの要件の一つは、ユーザーのための暗いモードを切り替えるための方法を追加することです.反応を使用して、ちょうどプレーンOL ' CSSはこれを簡単に達成されます!この記事では、反応フックの基本的な理解を持っていると仮定します.
一般的には、さまざまな色に影響を与えるために、全体のアプリ全体でダークモードの色を設定したいと思います.標準CSSではCSS variablesがある.我々は、我々の全体のアプリの色を変更するためにこれらを使用することができます!

沿ってコード

まず、我々のアプリの構造を設定することができます:

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

何も普通のちょうどヘッダーと我々の内容から.さて、ダークモード設定を切り替える方法を追加しましょう.私はすぐに我々のアプリをprettifyに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変数とAを追加します.

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(() => {
    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のより多くの内容