Webサイトにダークモードを追加する方法

コンピューター

ダークモードの傾向に続いて、私はこれが最初のライブラリを作成し、開発者がWebサイトにダークモードテーマを追加するのを支援するのに良い挑戦になると思いました。

特にブログのmojalakiでは、ダークモードを追加するのが良いと考えたため、過去に初期バージョンを実装しました。

mojalaki
mojalaki

現在では、使用はしてませんが・・・・

問題は、最初の実装が将来のすべてのユースケースに適合しなかったこととGatsby、反応の新しいバージョンを使用するようにプロジェクトを更新したため、実装が古くなったということでした。

Gatsby専用の何かを実装するために時間をかけて心配する代わりにSSR、私たちはそれを処理するライブラリを見つけて使用することにしました。

しかし、この手法をすべてのReactベースのWebサイトで使用し、すべてのコンポーネントで状態に簡単にアクセスできるコンテキストAPIを使用することは不可能でした。

それは私が貢献する良いニッチを、見つけたということです。

基づいたライブラリーを構築し、私はContext APIしてReact hooksいます。

皆さんは簡単に暗いモードを、実装することができます。

スポンサーリンク

Reactコンポーネント内の状態へのアクセス

前述したように、このライブラリはを使用するContext APIため、少なくともReact 16.3.0が必要です。

テーマに基づいてロゴsrcを変更する

アプリのスタイル設定を支援するために、ユーザーがシステムにprefers-color-scheme CSSメディア機能を使用して)明るい色または暗い色のテーマを使用するように要求したかどうかを検出し、  このテーマをなどのbody タグの  クラスとして設定し  <body class="dark">ます。

これにより、bodyタグがcssクラスdark またはの  場合に異なるスタイルを作成できます  light

を使用しているContext APIため、すべての子コンポーネントがこの状態にアクセスできるように、トップレベルコンポーネントの上にプロバイダーを追加する必要があります。

あなたは、任意の子コンポーネントにコンテキストを使用することができます<Provider>し、この文脈では公開されmodeことができるテーマである変数、lightまたはdarktoggleModeテーマを切り替える機能です。

モードが変更されると、このコンポーネントは再レンダリングされます。

CSS変数を使用する

ご覧のとおり、テーマに基づいてCSSを追加し、テーマを切り替えるボタンを追加するだけです。

スポンサーリンク

結論

このライブラリの利点は、CSSではできないものを変更する必要があり、テーマに基づいて画像のReact変更を行う必要がある上記の例のように、src簡単にサブスクライブできるようになったことです。

テーマが変更され、カスタム動作が適用されます。

全体として、これはオープンソースの世界で始めるのに素晴らしい経験でした。

誰かがあなたの作品を使用していて、それを使って製品を作るのを手伝っているという気持ちは素晴らしい事なのです。

コメント

タイトルとURLをコピーしました