use-dark-modeを使ってダークモード対応

prefers-color-schemeについて

ダークモードに対応する方法の一つとして、CSSのメディアクエリを使う方法があります。

prefers-color-scheme は CSS のメディア特性で、ユーザーがシステムに要求したカラーテーマが明色か暗色かを検出するために使用します。https://developer.mozilla.org/ja/docs/Web/CSS/@media/prefers-color-scheme

普通にCSSのメディアクエリを書くときと同じように

@media (prefers-color-scheme: dark) {
  body {
    background: #333;
    color: #fff;
  }
}

@media (prefers-color-scheme: light) {
  body {
    background: #fff;
    color:  #555;
  }
}

と書くだけで、ユーザーのOSの設定を読み取ってCSSで出し分けをしてくれます。

トグルボタンでモードの切り替えをさせる

ただ、prefers-color-schemeを使う場合、ユーザーがOSの設定を変更しない限り、ダークモード、通常モードの切り替えはできません。

そこで今回は、ユーザーのOSの設定をブラウザのlocalstorageに保存して、ボタンで切り替えができるようにします。

use-dark-mode

そんなときに便利なのがこのuse-dark-modeというライブラリです。
Reactのカスタムフックで作られています。

• bodyにdark-mode、light-modeのクラスを状態に応じて与えることができる
• localstorageにモードの状態を保存(再訪問時にモード(クラス)の状態を維持できる)

https://github.com/donavon/use-dark-mode/tree/29590271bb3a74f08975181c5ed68bd5a210ef83

import React from "react";
import useDarkMode from "use-dark-mode";

const DarkModeToggleButton = () => {
	const darkMode = useDarkMode(false);
	return (
		<input
		  id="toggle"
		  name="toggle"
		  type="checkbox"
		  checked={darkMode.value}
		  onChange={darkMode.toggle}
		/>
	);
}

export default DarkModeToggleButton;

あとはCSS変数でそれぞれの状態(body.dark-mode,body.light-mode)にCSS変数を定義することで利用できます。

body.dark-mode {
  --main-bg-color: #000;
  --main-letters-color: #fff;
}

body.light-mode {
  --main-bg-color: #fff;
  --main-letters-color: #333;
}

.example {
  background-color: var(--main-bg-color);
  color: var(--main-letters-color);
}