CSS変数を使用してダークモードテーマを作成する方法

序章

多くのWebサイトで、暗いテーマと明るいテーマを切り替えることができるようになったことにお気づきかもしれません。これは多くの場合、CSSカスタムプロパティ（別名 CSS変数）を使用して行われます。このチュートリアルでは、CSSとJavaScriptを使用するだけで同様のことを実現する方法を説明します。このコードがどのように機能するかについて詳しくは、JavascriptまたはHTMLのシリーズコンテンツをご覧ください。

ステップ1—CSS変数を作成する

CSSプリプロセッサを使用して定義された変数とは異なり、これらの値は動的であるため、CSSのカスタムプロパティの力はここで本当に輝いています。それらの値は、ユーザー入力に応じていつでも変更または上書きできます。変数の値が変更または上書きされると、変数を使用するすべての要素が自動的に変更を反映します。

まず、少し作業を行い、CSSカスタムプロパティで使用するすべての色を抽出する必要があります。次のスタイルから始めているとしましょう。

style.css

body {
  background: white;
  color: #555;
}

a, a:link {
  color: #639A67;
}
a:hover {
  color: #205D67;
}

次に、カスタムプロパティを次のように定義します。

style.css

:root {
  --bg: white;
  --text-color: #555;
  --link-color: #639A67;
  --link-hover: #205D67;
}

これで、CSSルールを次のようなものに変更できます。

style.css

body {
  background: var(--bg);
  color: var(--text-color);
}

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

テーマを適用するには、body要素にクラスを追加する必要があるため、そのクラス名でテーマの色を定義します。ここでは、クラスをfunkyと呼びます。変更する必要があるすべての色のオーバーライド色を定義してください。

style.css

.funky {
  --bg: hotpink;
  --text-color: white;
  --link-color: #B793E6;
  --link-hover: #3532A7;
}

ステップ2—古いブラウザのフォールバックを追加する

CSSカスタムプロパティのサポートはかなり良いですが、古いブラウザを使用しているユーザーのフォールバックを含めることをお勧めします。

カスタムプロパティとして定義された色で線形グラデーションの背景を持つ必要がある要素があるとしましょう。最初にハードコードされた色を指定すると、古いブラウザは理解できないバージョンを無視します。

style.css

background: linear-gradient(to right, #FFFB85, #5A3662); /* our fallback */
background: linear-gradient(to right, var(--top-grad1), var(--top-grad2));

ステップ3—テーマを切り替える

2つのテーマ間のトグルボタンとして機能する要素にイベントリスナーを追加するために必要なJavaScriptはごくわずかです。

ここで、トグルボタンにはtoggle-themeクラスがあり、document.querySelectorを使用してその要素への参照を取得します。

app.js

let toggle = document.querySelector('.toggle-theme');

toggle.addEventListener('click', function(e) {
  e.preventDefault();

  if (document.body.classList.contains('funky')) {
    // Turning the theme off:
    document.body.classList.remove('funky');
    // Reverse logic on the button text, so that users can turn
    // the theme back on:
    toggle.innerText = 'Turn theme on';
  } else {
    document.body.classList.add('funky');
    toggle.innerText = 'Turn theme off';
  }
});

これは、2つのテーマを切り替えるためのトリックです。ページが読み込まれたときにテーマが自動的に適用されるように、 localStorage にアイテムを追加/削除すると同時に、より良い方法を実行できます。

app.js

let toggle = document.querySelector('.toggle-theme');

// Turn the theme off if the 'funky' key exists in localStorage
if (localStorage.getItem('funky')) {
  document.body.classList.add('funky');
  toggle.innerText = 'Turn theme off';
}

toggle.addEventListener('click', function(e) {
  e.preventDefault();

  if (document.body.classList.contains('funky')) {
    document.body.classList.remove('funky');
    toggle.innerText = 'Turn theme on';
    localStorage.removeItem('funky');
  } else {
    document.body.classList.add('funky');
    toggle.innerText = 'Turn theme off';
    localStorage.setItem('funky', true);
  }
});

この小さなスニペットとCSS変数を使用して、ダークモード、ライトモードなど、このようなテーマのWebサイトを作成できます。

結論

このチュートリアルでは、ダークモードとライトモードを備えたテーマのあるWebサイトを作成しました。このコードがどのように機能するかについて詳しくは、JavascriptまたはHTMLのシリーズコンテンツをご覧ください。