+++

「夜に見ると画面の白い背景が眩しすぎる！」
そんな読者のストレスを軽減するために、今どきのWebサイトやアプリには ダークモード (Dark Mode) の対応が必要不可欠となっています。

大掛かりなテーマ改修が必要に思えますが、Hugo自作テーマの環境であれば「CSS変数（Custom Properties）」と少しの「JavaScript」を追加するだけで驚くほど簡単に実装可能です。
読者に親切なDIYテーマにするため、ダークモードを導入する実際の手順を解説します！

仕組み：CSS変数 (Custom Properties) を活用する

昔は「ダークモード用のCSSファイル」を別に作って切り替えていましたが、今は CSS変数 を使うのが主流です。

  1. 色を「変数」として定義する（例: --bg-color: white;）。
  2. 「ダークモードの時は、変数の値を書き換える」設定をする（例: --bg-color: black;）。
  3. JavaScriptで、その「ダークモード設定」をオンオフするスイッチを作る。

これだけです！

1. CSSの書き換え (style.css)

まず、色の定義を以下のように書き換えます。

/* ルートで基本の色（ライトモード）を定義 */
:root {
    --bg-color: #ffffff;
    --text-color: #333333;
    --header-bg: #333333;
    --link-color: #007bff;
}

/* ダークモード時の色を定義 */
[data-theme="dark"] {
    --bg-color: #1a1a1a;
    --text-color: #e0e0e0;
    --header-bg: #000000;
    --link-color: #66b3ff;
}

/* 実際に変数を使う */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s; /* ふわっと切り替える */
}

a {
    color: var(--link-color);
}

2. JavaScriptの用意 (static/js/dark-mode.js)

スイッチを押した時に data-theme="dark" を付けたり消したりするスクリプトを作ります。
localstorage を使うことで、ページ遷移しても設定を覚えておけます。

document.addEventListener('DOMContentLoaded', () => {
    const toggleBtn = document.getElementById('theme-toggle');
    const root = document.documentElement;
    
    // 保存された設定があればそれを適用
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme === 'dark') {
        root.setAttribute('data-theme', 'dark');
        toggleBtn.textContent = '☀️';
    }
    
    toggleBtn.addEventListener('click', () => {
        const currentTheme = root.getAttribute('data-theme');
        if (currentTheme === 'dark') {
            root.removeAttribute('data-theme'); // ライトに戻す
            localStorage.setItem('theme', 'light');
            toggleBtn.textContent = '🌙';
        } else {
            root.setAttribute('data-theme', 'dark'); // ダークにする
            localStorage.setItem('theme', 'dark');
            toggleBtn.textContent = '☀️';
        }
    });
});

3. ボタンの設置

最後に、ヘッダーなどに切り替えボタンを置きます。

<button id="theme-toggle">🌙</button>
<script src="/js/dark-mode.js"></script>

読者の目に優しいダークモードを導入しよう

CSS変数（Custom Properties）を活用したダークモードの実装は、大掛かりなCSSファイルの切り替えが不要で、たった数十行のコード追加で完結するモダンで手軽な手法です。
保存機能（localStorage）と組み合わせることで、「ページを移動してもダークモードが維持される」快適な操作感が実現します。
読者の閲覧環境や時間帯に合わせた優しいUI（ユーザーインターフェース）を提供することで、サイトの利便性がぐっと高まります！🌓