Web アプリにダーク/ライト テーマを実装する方法

Web サイトで暗いテーマと明るいテーマを切り替えて、「自分のサイトでもそれができたらいいのに」と思ったことはありますか?さて、それができるようになりました。この記事では、HTML、CSS、JavaScript を使用して Web プロジェクトにダーク モードとライト モードを実装し、ユーザーに最高の視覚エクスペリエンスを提供する方法を説明します。

前提条件:このチュートリアルを理解するには、HTML と CSS の基本的な理解が必要です。

ダーク/ライトテーマの実装

ウェブサイトでダークモード/ライトモードを設定するための主なコンポーネントは次のとおりです:

• ウェブページ

• テーマを切り替えるためのボタン

• 切り替えるテーマまたは色

• テーマとボタンのテキストを切り替える背後にあるロジック。

ウェブページ

プロジェクトをセットアップする

リーリー

プレーンなWebページの出力

トグルボタン

テーマのトグルボタンを追加することが重要です。これは、ライト モードからダーク モードへ、またはその逆の色の変更をトリガーするボタンです。

リーリー

ライト/ダークモードのテーマ

ここには 2 つのテーマまたは色が関係しているため、これは重要なステップです。数行のコードで Web ページにさまざまなスタイルを追加する方法が必要です。テーマには CSS 変数を使用します。新しいと思われる場合は、CSS 変数に関する私の記事をお読みください。

ステップ 1:

ライトテーマのスタイルを宣言します

リーリー

ステップ 2:

ダークテーマのクラスを宣言します

リーリー

注: 変数名は同じである必要があります。

これは、変数を使用せずに body 要素のみを使用して実行できます。ただし、多くの場合、背景色以外の変更が必要になるため、CSS 変数を使用することをお勧めします。一部の Web アプリのテーマでは、テキストの色、境界線の色、影などを変更する必要があります。そのため、変数を使用すると、特に大規模なアプリケーションですべての要素を完全に制御できます。

ウェブページのスタイルを完成させましょう。 CSS が HTML ファイルにリンクされていることを確認してください。

リーリー

出力

テーマの切り替えの背後にあるロジック

ユーザーがトグル ボタンをクリックすると、2 つのことが起こることが期待されます。

• ウェブサイトのテーマまたはカラーモードを変更する必要があります。

• ボタンのテキストが変更されるはずです。

テーマを変更するにはDOM (ドキュメント オブジェクト モデル) を操作して、Web ページのボタンと本文を取得します。
「ダーク」クラスを body 要素に追加する関数を宣言します (これは CSS ですでに宣言されています)。
ユーザーがダーク/ライト モード ボタンをクリックすると、この関数が呼び出されます。 JS が HTML にリンクされていることを確認してください。

リーリー

テキストを変更するには

別のコード ブロックを toggleTheme 関数に追加します。このコードは単に、
本文に「dark」クラスが含まれている場合、テキストを「Light モード」に切り替え、またはその逆を意味します。
リーリー

これは 1 行で実行でき、コードがすっきりします。

リーリー

はい、今すぐテーマを切り替えることができます。クールですよね？完全なデモについては、添付のビデオを確認してください。

結論は

このチュートリアルで概説されている手順に従うことで、ユーザーが好みのテーマを柔軟に選択できるようになり、Web アプリがより魅力的でアクセスしやすくなります。

私の記事を気に入っていただけましたら、私の仕事をサポートするためにコーヒーを買っていただけませんか

プログレッシブ Web アプリ、Web の最も内側の仕組み、CSS 変数、フロントエンド開発の初心者ガイドなどに関する私の他の記事をお読みください。

その他の Web 開発およびテクノロジー関連の記事については、「いいね！」、コメント、フォローしてください。コーディングを楽しんでください!!!

以上がWeb アプリにダーク/ライト テーマを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。