CSS と JavaScript を使用して Web サイトをダークモードに切り替える方法-CSSチュートリアル-php.cn

How to Switch Your Website to Dark Mode Using CSS and JavaScript

導入

ダークモードは、暗い背景に明るいテキストと要素を使用する表示設定です。見た目が良く、いくつかの実用的な利点があるため、人気が高まっています。

ダークモードの利点は次のとおりです:

目の疲れの軽減:ダークモードは、画面から発せられる明るい光の量を減らすため、特に暗い環境で目に負担がかかりません。
OLED スクリーンのバッテリー寿命の向上:OLED (有機発光ダイオード) スクリーンでは、ダークモードは黒ピクセルが基本的にオフになり、明るい色の表示に比べて消費電力が少なくなるため、バッテリー寿命を節約できます。

プロジェクトのセットアップ

シンプルな光をテーマにした Web ページテンプレートから始めましょう。次に、それを切り替え可能なライト/ダークモードを備えた Web サイトに変換し、ユーザーがライトテーマとダークテーマを切り替えられるようにします。

ダークモードスタイルの実装

色の選択

最初のステップは、使用しているすべての色をリストし、それぞれにダークテーマのバージョンを選択することです。以下の表に、ページ上のすべての色と、それに対応するダークバージョンをリストしました。

カスタム変数

次に、CSS 変数を使用して、それらの変数を使用して本体にダーククラスとライトクラスを作成します。

CSS 変数については、「CSS カスタムプロパティの使用」を参照してください。基本的に、これらは 2 つのダッシュ (--) を使用して定義され、ドキュメント内で再利用するために値を保存するエンティティです。 CSS 変数を使用すると、変更が自動的に更新されるため、メンテナンスが容易になります。

動的要素の色

var() CSS 関数を使用して CSS 変数の値を挿入します。このようにして、手動でそれぞれを変更するのではなく、動的に色を変更し、1 つの変数を更新してドキュメント全体の変更を反映できます。

ここに nav 要素とその子の例を示します:

JavaScript でライト/ダークモードを切り替える

これで、ボディのクラスをダークまたはライトに変更して、テーマを切り替えることができます。まず、ヘッダーにボタンを追加し、そのクリックイベントに changeTheme() 関数を設定します。
リーリー

リーリー

名前ボディバックプライマリテキストヘッダー-フッター-背景ヘッダーフッターテキストセクション背景二次テキスト影リーリーリーリー本体のクラスを切り替えるchangeTheme()関数を定義します:ユーザーはボタンをクリックしてウェブサイトのテーマを変更できるようになりました。以下の CodePen でチュートリアルのコードを確認できます次のステップさらに、ユーザーのテーマ設定をローカルストレージに保存することもできます。選択したテーマを保存し、ページの読み込み時にチェックするようにchangeTheme()関数を更新すると、ユーザーの選択が確実に記憶され、次回の訪問時に自動的に適用されます。カラースキームの追加: ダーク;ダークテーマのプロパティを使用すると、スタイルを設定するのが難しい一部の要素がブラウザによってスタイルを変更されるようにすることもできます。結論結論として、Web サイトにダークモードを追加すると、目の疲れが軽減され、OLED スクリーンのバッテリー寿命が延長されるため、ユーザーエクスペリエンスが向上します。このガイドに従うと、CSS と JavaScript を使用してライト/ダークモードの切り替えを簡単に設定できます。デザインに合わせてダークモードをカスタマイズします。実装を共有するか、以下のコメントで質問してください。