反応フックでダークモードをする方法

ダークモードは、アプリやウェブサイト全体で広く採用されている最新の機能の一つです.暗い色は、モバイルデバイスのバッテリ寿命を延ばすことができます.貯蓄は、YouTubeモードで提供されるダークモードでは、50 %の明るさで15 %のエネルギー削減と100 %の正しさで巨大な60 %の削減を可能にします.Apple 2020年に進むことを確認して、彼らの電話はOLEDスクリーンを特徴とします.
完了したデモをhere . このデモの完了コードは見つかりますhere .

なぜフックを反応させるか
我々は、反応コンポーネントを使用すると、UIの小さな管理可能な部分にアプリケーションを整理するのに役立つトップダウンデータフローを知っている.しかし,成分モデルのみでは成分が大きくなり,リファクタリングが困難になる.加えて、論理はコンポーネント間で複製される必要があるかもしれません.フックは私たちがコンポーネント内のロジックを再利用するのが簡単な慎重な単位に整理することができるので大きいです.

However, we often can’t break complex components down any further because the logic is stateful and can’t be extracted to a function or another component. -

フックの実装
ダークモードで反応フックを実装する方法を簡単にするために、ブラウザが再ロード時にユーザーの好みを覚えているようにlocalstorageを使用します.より複雑なWebアプリケーションでは、ユーザーの好みをデータベースに格納できます.だからFacebookの標準的な反応のboilerplateから始めましょう.RIPPOをクローンし、新しく作成したプロジェクトフォルダにディレクトリを変更し、アプリケーションを実行します.詳細については、チェックアウトdocs .

npx create-react-app dark-mode;
cd dark-mode;
npm start;

次に、CSSのカラー変数を追加しましょう.我々は、色と背景色から始めることができますが、より大きなカラースキームを構築したい場合は、より多くを追加することができます.このように、我々は我々のサイトの向こうで簡単に実装されることができる一貫した方法で我々のカラースタイリングをモジュール化しています.

// App.css

...

html[data-theme="light"]  {
  --color: rgb(5, 5, 5);
  --background-color: rgb(250, 250, 250);
}

html[data-theme="dark"]  {
  --color: rgb(250, 250, 250);
  --background-color: rgb(5, 5, 5);
}

...

変数を設定するには、アプリケーションのヘッダーCSSを置き換えます.閉じるこの動画はお気に入りから削除されています

// App.css

...

.App-header {
  background-color:var(--background-color);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color:var(--color);
}

...

テーマトグルコンポーネントの作成
src *フォルダ内に新しいファイルを作成し、** themetoggle、またはその結果を指定します.これは現在、スタータープロジェクトです.ここでは、現在のテーマの好みを格納するためにUSENTフックを使用するつもりです.

// ThemeToggle.js

...

  const ThemeToggle = () => {
    const [darkMode, setDarkMode] = useState(
      localStorage.getItem("theme") === "dark" ? true : false
    );
    useEffect(() => {
      document
        .getElementsByTagName("HTML")[0]
        .setAttribute("data-theme", localStorage.getItem("theme"));
    }, []);
  };

...

ユーザーが初めてサイトにアクセスしている場合、LocalStorageに設定が設定されません.厳密な等値比較演算子はfalseをスローし、DarkModeフックアプリケーション内で光のテーマを適用します.
HTMLデータを使用します.attribute , これにより、意味のあるHTML要素に情報を格納できます.私たちは暗く、または逆のテーマを切り替えるためにトリガされる予定の方法でそれを使用します.同じロジックを使用して、私たちは、以前からsetdarkmodeフックを呼び出して、localstorageでテーマをセットすることもできます.

// ThemeToggle.js

...

  const switchThemes = () => {
    if (isDark === false) {
      localStorage.setItem("theme", "dark");
      document
        .getElementsByTagName("HTML")[0]
        .setAttribute("data-theme", localStorage.getItem("theme"));
      setDarkMode(true);
    } else {
      localStorage.setItem("theme", "light");
      document
        .getElementsByTagName("HTML")[0]
        .setAttribute("data-theme", localStorage.getItem("theme"));
      setDarkMode(false);
    }
  };

...

私たちがthemetoggleでする必要がある最後のものは輸入されるボタンを返します.

// ThemeToggle.js

...

  return (
    <label className="switch">
      <input
        type="checkbox"
        defaultChecked={isDark}
        onChange={() => toggleThemeChange()}
      />
      <span className="slider round" />
    </label>
  );

...

今、テストするには、我々のアプリにインポートすることができます.js

// App.js

...

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          React Hooks Dark Mode Starter
        </p>
        <ThemeToggle />
      </header>
    </div>
  );
}

...

おめでとう!
ここで、アプリケーションで必要な場所に配置できる使用可能な要素があります.あなたが完全なコードを見たり、あなた自身のフォークを作成したい場合はhere .
当初公開https://www.josephc.how/react-hooks-dark-mode/