ダーク モードとライト モードのスイッチャーの人気が高まっており、ユーザーは好みの視覚体験を柔軟に選択できます。目の疲れを軽減するためでも、バッテリー寿命を節約するためでも、単に個人の好みに従うためでも、ダーク/ライト モード スイッチャーを実装すると、ユーザー エクスペリエンスが大幅に向上します。この記事では、HTML、CSS、JavaScript を使用して、シンプルかつ効果的なダーク/ライト モード スイッチャーを作成する方法を説明します。

ダーク/ライト モードを実装する理由

1.ユーザー設定: ユーザーによっては、特に低照度環境での美しさや目の疲れの軽減のためにダーク モードを好む人もいます。

2.アクセシビリティ: 視覚障害のあるユーザーを支援できるテーマを提供することで、アクセシビリティを向上させます。

3.バッテリーの節約: OLED スクリーンでは、ダーク モードによりバッテリー寿命を節約できます。

HTML構造のセットアップ

まず、単純な HTML 構造を作成します。ダークモードとライトモードを切り替えるボタンが必要です。

    
    
    
    


    

        
Dark/Light Mode Switcher
        Switch to Dark Mode
        
Toggle the button to switch between dark and light modes.
    
    

CSS を使用したスタイル設定

次に、ダーク モードとライト モードの両方のスタイルを定義します。 CSS 変数を使用して、テーマの切り替えを簡単にします。

/* styles.css */
:root {
    --bg-color: #ffffff;
    --text-color: #000000;
    --button-bg-color: #000000;
    --button-text-color: #ffffff;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: Arial, sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.container {
    text-align: center;
    margin-top: 50px;
}

button {
    background-color: var(--button-bg-color);
    color: var(--button-text-color);
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

button:hover {
    opacity: 0.8;
}

body.dark-mode {
    --bg-color: #333333;
    --text-color: #ffffff;
    --button-bg-color: #ffffff;
    --button-text-color: #000000;
}

JavaScript機能の追加

次に、テーマの切り替えを処理するための JavaScript を追加します。また、ユーザーの設定を localStorage に保存して、ユーザーの選択がセッション間で維持されるようにします。

// script.js
document.addEventListener('DOMContentLoaded', () => {
    const switcher = document.getElementById('modeSwitcher');
    const currentMode = localStorage.getItem('theme') || 'light';

    if (currentMode === 'dark') {
        document.body.classList.add('dark-mode');
        switcher.textContent = 'Switch to Light Mode';
    }

    switcher.addEventListener('click', () => {
        document.body.classList.toggle('dark-mode');
        const mode = document.body.classList.contains('dark-mode') ? 'dark' : 'light';
        switcher.textContent = mode === 'dark' ? 'Switch to Light Mode' : 'Switch to Dark Mode';
        localStorage.setItem('theme', mode);
    });
});

説明

1. CSS 変数: CSS 変数を使用して両方のモードの色を定義し、モード間の切り替えを簡単にします。

2. JavaScript: ボタンにイベント リスナーを追加して、body 要素のダークモード クラスを切り替えます。また、現在のモードに基づいてボタンのテキストを更新し、モードを localStorage.

3.永続的なテーマ: ページが読み込まれると、localStorage でユーザーの設定を確認し、適切なテーマを適用します。

結論

ダーク/ライト モード スイッチャーを実装すると、さまざまな好みや条件に応じた視覚的なオプションが提供され、ユーザー エクスペリエンスが向上します。わずか数行の HTML、CSS、JavaScript を使用して、この貴重な機能を Web プロジェクトに追加できます。

スムーズなトランジションや追加のテーマなど、より高度な機能を自由に試してください。可能性は無限にあり、ユーザーは柔軟性の追加を高く評価するでしょう。

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