【フロントエンド入門30】ライトテーマとダークテーマの切り替え機能を実装しよう

Webアプリケーションにおいて、ユーザーが見やすいデザインを選べるようにすることは重要です。特に、ライトテーマとダークテーマの切り替え機能は、多くのユーザーに求められている機能の一つです。本記事では、初心者でもわかるように、この機能を実装する手順を解説します。

テーマ切り替えの基本
1. ライトテーマとダークテーマとは？
2. 実装の概要
CSSによるテーマのスタイル定義
1. HTML構造の例
2. CSSスタイルの例
JavaScriptによるテーマ切り替えの実装
1. 基本的なJavaScriptコード
2. 解説
ユーザビリティを向上させる工夫
実践例：動作するテーマ切り替えの完成
結論

テーマ切り替えの基本

ライトテーマとダークテーマとは？

ライトテーマ：背景が明るい色で、テキストは暗い色を使用するデザイン。
ダークテーマ：背景が暗い色で、テキストは明るい色を使用するデザイン。

ダークテーマは、目の負担を軽減し、特に夜間や暗い環境での利用に適しています。

実装の概要

ライトテーマとダークテーマの切り替え機能は、以下の手順で実装します：

テーマに応じたCSSスタイルを用意する。
ユーザーがテーマを選択するUI（ボタンなど）を用意する。
JavaScriptでテーマの状態を管理し、選択したテーマを適用する。

CSSによるテーマのスタイル定義

まず、テーマごとの基本スタイルをCSSで定義します。

HTML構造の例

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>テーマ切り替え機能</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body class="light">
    <header>
        <h1>ライトテーマとダークテーマの切り替え</h1>
        <button id="themeToggle">テーマを切り替える</button>
    </header>
    <main>
        <p>このページではテーマの切り替えを体験できます。</p>
    </main>
    <script src="script.js"></script>
</body>
</html>

CSSスタイルの例

body {
    font-family: Arial, sans-serif;
    transition: background-color 0.3s, color 0.3s;
}

/* ライトテーマのスタイル */
body.light {
    background-color: #ffffff;
    color: #000000;
}

/* ダークテーマのスタイル */
body.dark {
    background-color: #121212;
    color: #ffffff;
}

button {
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    background-color: #007bff;
    color: white;
    border-radius: 5px;
}

JavaScriptによるテーマ切り替えの実装

次に、JavaScriptでユーザーの操作に応じてテーマを切り替える処理を実装します。

基本的なJavaScriptコード

const themeToggleButton = document.getElementById('themeToggle');
const body = document.body;

// ページ読み込み時に保存されたテーマを適用
window.addEventListener('DOMContentLoaded', () => {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
        body.className = savedTheme;
    }
});

// テーマを切り替える関数
function toggleTheme() {
    if (body.classList.contains('light')) {
        body.classList.replace('light', 'dark');
        localStorage.setItem('theme', 'dark'); // 選択したテーマを保存
    } else {
        body.classList.replace('dark', 'light');
        localStorage.setItem('theme', 'light');
    }
}

// ボタンのクリックイベントに関数を紐づけ
themeToggleButton.addEventListener('click', toggleTheme);

解説

localStorage：ユーザーが選択したテーマをブラウザに保存し、次回以降の訪問時にもそのテーマが適用されるようにします。
DOMContentLoadedイベント：ページが読み込まれた際に、保存されたテーマを適用します。
classList.replace()：テーマをスムーズに切り替えます。

ユーザビリティを向上させる工夫

1. 初期設定をユーザーのシステム設定に合わせる

ユーザーのOS設定に基づいて初期テーマを自動的に選択することで、より自然なUXを提供します。

例：メディアクエリを使用してテーマを自動設定

window.addEventListener('DOMContentLoaded', () => {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
        body.className = savedTheme;
    } else {
        const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
        body.className = prefersDarkScheme ? 'dark' : 'light';
    }
});

2. スムーズなアニメーションを追加

CSSのtransitionプロパティを使用して、テーマの切り替えを滑らかにします。

例：スムーズな切り替え

body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

3. ボタンのラベルを動的に変更

現在のテーマに応じて、ボタンのテキストを動的に変更します。

例：ボタンのラベル切り替え

function toggleTheme() {
    if (body.classList.contains('light')) {
        body.classList.replace('light', 'dark');
        themeToggleButton.textContent = 'ライトテーマに切り替え';
        localStorage.setItem('theme', 'dark');
    } else {
        body.classList.replace('dark', 'light');
        themeToggleButton.textContent = 'ダークテーマに切り替え';
        localStorage.setItem('theme', 'light');
    }
}