ウェブサイトにダークモードを追加する最も簡単な方法-jsチュートリアル-php.cn

ウェブサイトにダークモードを追加する最も簡単な方法

WBOY

リリース： 2024-07-29 04:46:23

オリジナル

482 人が閲覧しました

The Easiest Way to Add Dark Mode to Your Website

Web サイトやアプリケーションをダークモードで使用する機能は、近年人気が高まっています。目の疲れを軽減し、OLED スクリーニングデバイスのバッテリー寿命を延ばし、従来のライトテーマに代わる見た目にも美しい代替品を提供します。このチュートリアルでは、JavaScript を使用してテーマを切り替え、CSS 変数を使用して Web サイトにダークモードを追加する方法を説明します。

ステップ 1: HTML を設定する

まず、基本的な 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 ファイルへのリンクが含まれています。

ステップ 2: CSS 変数の定義

次に、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プロパティによって保証されます。

ステップ 3: テーマを切り替えるための JavaScript を追加する

次に、テーマの切り替えを処理するための 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 に保存するため、ページがリロードされてもテーマは維持されます。

ステップ 4: 実装のテスト

Web ブラウザを起動し、index.html ファイルを開いて実装をテストします。明るいテーマと暗いテーマを切り替えるには、[ダークモードの切り替え] ボタンをクリックします。
ページを更新してもテーマの設定には影響しないことに注意してください。

結論

CSS 変数と少しの JavaScript を利用すると、Web サイトにダークモードの切り替えをすばやく追加できます。この方法により、テーマのシームレスな移行が容易になり、ユーザーエクスペリエンスが向上します。このレッスンを基にして、自由にページに要素を追加したり、スタイルを変更したりしてください。

コーディングを楽しんでください:D

以上がウェブサイトにダークモードを追加する最も簡単な方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。