Web サイトやアプリケーションをダーク モードで使用する機能は、近年人気が高まっています。目の疲れを軽減し、OLED スクリーニング デバイスのバッテリー寿命を延ばし、従来のライト テーマに代わる見た目にも美しい代替品を提供します。このチュートリアルでは、JavaScript を使用してテーマを切り替え、CSS 変数を使用して Web サイトにダーク モードを追加する方法を説明します。
まず、基本的な HTML 構造から始めましょう。次の内容を含む index.html ファイルを作成します:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dark Mode Example</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <h1>Welcome to Dark Mode Tutorial</h1> <button id="theme-toggle">Toggle Dark Mode</button> </header> <main> <p>This is a sample website to demonstrate dark mode implementation.</p> </main> <script src="script.js"></script> </body> </html>
この HTML ファイルには、タイトルとダーク モードを切り替えるボタンを含むヘッダー、テキストが含まれるメイン コンテンツ領域、CSS および JavaScript ファイルへのリンクが含まれています。
次に、CSS で変数を定義しましょう。次の内容を含む styles.css ファイルを作成します:
:root { --background-color: #ffffff; --text-color: #000000; --header-background-color: #f1f1f1; } body { background-color: var(--background-color); color: var(--text-color); font-family: Arial, sans-serif; transition: background-color 0.3s, color 0.3s; } header { background-color: var(--header-background-color); padding: 20px; text-align: center; } button { padding: 10px 20px; margin-top: 20px; cursor: pointer; } .dark-mode { --background-color: #181818; --text-color: #ffffff; --header-background-color: #242424; }
この CSS ファイルでは、:root を使用して CSS 変数のグループを定義します。ライト モードの場合、これらの変数は背景色、テキスト色、ヘッダーの背景色を決定します。さらに、.dark-mode クラスが定義されており、その設定がこれらの変数より優先されます。テーマ間のシームレスな移行は、body 要素のtransitionプロパティによって保証されます。
次に、テーマの切り替えを処理するための JavaScript を追加しましょう。次の内容を含む script.js ファイルを作成します:
const themeToggle = document.getElementById('theme-toggle'); const body = document.body; // Check for saved user preference const savedTheme = localStorage.getItem('theme'); if (savedTheme) { body.classList.add(savedTheme); } // Toggle dark mode themeToggle.addEventListener('click', () => { body.classList.toggle('dark-mode'); // Save user preference if (body.classList.contains('dark-mode')) { localStorage.setItem('theme', 'dark-mode'); } else { localStorage.removeItem('theme'); } });
このスクリプトは、テーマの切り替えボタンと body 要素を選択します。ボタンをクリックすると、本体の ダークモード クラスが切り替わります。また、スクリプトはユーザーのテーマ設定を localStorage に保存するため、ページがリロードされてもテーマは維持されます。
Web ブラウザを起動し、index.html ファイルを開いて実装をテストします。明るいテーマと暗いテーマを切り替えるには、[ダーク モードの切り替え] ボタンをクリックします。
ページを更新してもテーマの設定には影響しないことに注意してください。
CSS 変数と少しの JavaScript を利用すると、Web サイトにダーク モードの切り替えをすばやく追加できます。この方法により、テーマのシームレスな移行が容易になり、ユーザー エクスペリエンスが向上します。このレッスンを基にして、自由にページに要素を追加したり、スタイルを変更したりしてください。
コーディングを楽しんでください:D
以上がウェブサイトにダークモードを追加する最も簡単な方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。