最低限のDark Modeライブラリ「color-scheme-handler」

近年増えつつあるダークモード対応のサイト

少し前にOSのカラースキーマを"Dark"に変更してみて、思った以上に多くのWebサイトがダークモードの対応をしていることに気が付いた。
ダークモードには次のようなメリットがあると言われてる。

目が疲れにくい
見やすい
デバイスのバッテリーが長持ちする
かっこいい

それぞれについて賛否両論あるんだけど、少なくとも「かっこいい」という部分については大賛成である。

ダークモードの対応は難しいものではないが少し面倒

ダークモードの対応方法について調べてみると、そこまで難しいものではなさそうだった。
ただWebサイトを複数持っている場合、それぞれに対しその対応するのは少し面倒にも思えた。

例えば自分のケースだと次のような対応をする必要があった。

ユーザーがOSでダークモードを選択してる場合は、ダークモードで表示する
ユーザーがWebサイト上でダークモードとノーマルモードを切り替えられるようにする
ダークモード（ノーマルモード）に切り替えた時に、ページ遷移をしても元に戻らないようにする

ダークモード対応用の最低限のライブラリの「color-scheme-handler」

手前味噌だけど、ダークモードを比較的簡単に実装するためのライブラリを開発した。
もちろん既に多くの便利なダークモード対応用のライブラリがあるんだけど、
どれも自分にとっては過剰なものだったので。

「color-scheme-handler」は多くの機能を備えてるわけではないけど、
その分シンプルに使えるものになっていると思う。

github.com

使い方

大まかな使い方はこんな感じ。

1. インストール

まずはインストール

> npm install color-scheme-handler

2. CSSを書く

ダークモードの時は、 .dark-mode 、ノーマルモードの時は、 .light-mode のクラスが root に対して付与されるので、
それぞれに対してのCSSを書く。

.light-mode {
  background-color: #ffffff;
  color: #333333;
}

.light-mode a { color: #1a0dab; }

.dark-mode {
  background-color: #333333;
  color: #ffffff;
}

.dark-mode a { color: #ffffff; }

3. 適切なカラースキーマを反映させる

ページの読み込み時に、適切なカラースキーマを反映させるために、
DOMの読み込み時に、 reflectCurrentColorScheme という関数を実行させる。
カラースキーマの情報をsession storage に保存しているので、
前にページを開いたことがあれば、その情報をもとにダークモードかどうかが判断される。
なければ、OSのカラースキーマに従う。

import { reflectCurrentColorScheme } from 'color-scheme-handler'

document.addEventListener('DOMContentLoaded', reflectCurrentColorScheme)

4. ボタンクリック時にカラースキーマを切り替える

もしユーザーがダークモードとノーマルモードを切り替えれるようにする場合は、
ボタンのクリックイベントに switchCurrentColorScheme という関数をバインドする。

import { switchCurrentColorScheme } from 'color-scheme-handler'

document
  .getElementById('change-color-scheme')
  .addEventListener('click', switchCurrentColorScheme)

やらなければいけないことは以上。
これならダークモード対応の負担も少ないはず・・！

おわりに

もしあなたがダークモード対応をするときに、このライブラリがちょうどよく役に立てば何より嬉しい。
加えて意見やバグの報告なんかも歓迎しているので是非！

ryoのぼやき

技術についての学習内容のまとめです。