Web サイトで暗いテーマと明るいテーマを切り替えて、「自分のサイトでもそれができたらいいのに」と思ったことはありますか?さて、それができるようになりました。この記事では、HTML、CSS、JavaScript を使用して Web プロジェクトにダーク モードとライト モードを実装し、ユーザーに最高の視覚エクスペリエンスを提供する方法を説明します。
前提条件: このチュートリアルを理解するには、HTML と CSS の基本的な理解が必要です。
Web サイトでダーク モード/ライト モードを設定する主なコンポーネントは次のとおりです:
ウェブページ
テーマを切り替えるボタン
切り替えるテーマまたは色
テーマとボタンのテキストを切り替える背後にあるロジック。
プロジェクトをセットアップする
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Virtual Tour App</title>
</head>
<body>
<div class="hero-sec">
<div class="col1">
<h1>Everyday Is a Journey</h1>
<p>Visit any Location Virtually, Anytime, Anywhere</p>
<button>Tour</button>
</div>
<div class="col2">
<img src="img.jpg" alt="landscape" width="560px">
</div>
</div>
</body>
</html>
プレーンな Web ページの出力
テーマの切り替えボタンを追加することが重要です。これは、ライト モードからダーク モードへ、またはその逆の色の変更をトリガーするボタンです。
<button id="toggle-button">Dark mode</button>
ここには 2 つのテーマまたは色が関係しているため、これは重要なステップです。数行のコードで Web ページにさまざまなスタイルを追加する方法が必要です。テーマには CSS 変数を使用します。初めてだと思われる場合は、CSS 変数に関する私の記事をお読みください。
ステップ 1:
ライトテーマのスタイルを宣言します
:root{
--bg: #fafaf3;
--color: #0A0A0A
}
// This is the light theme; the default theme
ステップ 2:
ダークテーマのクラスを宣言します
.dark{
--bg: #0A0A0A;
--color: #ffffff;
}
// This is the class that will be added onclick of the button
注: 変数名は同じである必要があります。
これは、変数を使用せずに body 要素のみを使用して実行できます。ただし、多くの場合、背景色以外の変更が必要になるため、CSS 変数を使用することをお勧めします。一部の Web アプリのテーマでは、テキストの色、境界線の色、影などを変更する必要があります。そのため、変数を使用すると、特に大規模なアプリケーションですべての要素を完全に制御できます。
Web ページのスタイルを完成させましょう。 CSS が HTML ファイルにリンクされていることを確認してください。
:root{
--bg: #fafaf3;
--color: #0A0A0A
}
// This is the light theme; the default theme
.dark{
--bg: #0A0A0A;
--color: #ffffff;
}
body{
background: var(--bg);
color: var(--color);
font-family: monospace
}
.hero-sec{
display: flex;
justify-content: space-evenly;
color: var(--color);
margin-top: 48px;
}
.col1{
margin-top: 6rem;
height: 40%;
}
h1{
font-size: 2.5rem;
}
p{
font-size: 1.3rem;
}
button{
padding: 1rem 2rem;
background-color: #3f51b5;
color: #ffffff;
border: none;
cursor: pointer;
}
.hero-sec button{
font-size: 1.3rem;
}
出力
ユーザーがトグル ボタンをクリックすると、2 つのことが起こることが予想されます。
Web サイトのテーマまたはカラー モードを変更する必要があります。
ボタンのテキストが変更されるはずです。
テーマを変更するには
DOM (ドキュメント オブジェクト モデル) を操作して、Web ページのボタンと本文を取得します。
「ダーク」クラスを body 要素に追加する関数を宣言します (これは CSS ですでに宣言されています)。
ユーザーがダーク/ライト モード ボタンをクリックすると、この関数が呼び出されます。 JS が HTML にリンクされていることを確認してください。
const toggleBtn = document.getElementById("toggle-button")
const body = document.body
function toggleTheme() {
body.classList.toggle("dark")
}
toggleBtn.addEventListener('click', toggleTheme);
テキストを変更するには
別のコード ブロックを toggleTheme 関数に追加します。このコードは単に、本文に「dark」クラスが含まれている場合、テキストを「Light モード」に、またはその逆に切り替えることを意味します。
if (body.classList.contains("dark")) {
toggleBtn.textContent = "Light Mode";
} else {
toggleBtn.textContent = "Dark Mode";
}
これは 1 行で実行でき、コードがすっきりします。
toggleBtn.textContent = body.classList.contains("dark")? "Light Mode" : "Dark Mode"
はい、今すぐテーマを切り替えることができます。クールですよね？完全なデモについては、添付のビデオを確認してください。
このチュートリアルで概説されている手順に従うことで、ユーザーが好みのテーマを柔軟に選択できるようになり、Web アプリがより魅力的でアクセスしやすくなります。
私の記事を気に入っていただけましたら、私の仕事をサポートするためにコーヒーを買っていただけます
プログレッシブ Web アプリ、Web の最も内側の仕組み、CSS 変数、フロントエンド開発の初心者ガイドなどに関する私の他の記事をお読みください。
その他の Web 開発およびテクノロジー関連の記事については、「いいね！」、コメント、フォローしてください。コーディングを楽しんでください!!!
以上がWeb アプリにダーク/ライト テーマを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
