このウェブサイトを、夜(19から5時)の間は黒背景になるようにした。夜間モードかどうかは表示しないので、白かったり黒かったりするウェブサイトになった。通常は、モードを切り替えるボタン等を設置するが、日に何度も訪れるウェブサイトではないので、有無を言わさず適用することにした。
実装は、クラス名を追加する数行のJavaScriptと、カスタム・プロパティーだけを変える数行のCSSで行った。
const currentHour = new Date().getHours();
if (currentHour < 5 || currentHour > 18) {
document.documentElement.classList.add("night");
}ルート要素にnightクラスを追加するだけの簡単なものだ。これをhead要素内で同期的に実行しておくと、スムーズに切り替わるだろう。
:root.night {
--color-fg: hsl(0, 0%, 88%);
--color-fg-near: hsl(0, 0%, 66%);
--color-fg-far: hsl(0, 0%, 33%);
--color-bg: hsl(0, 0%, 11%);
--color-accent: hsl(30, 100%, 44%);
--color-accent-near: hsl(30, 100%, 77%);
--color-accent-far: hsl(30, 100%, 33%);
}一方、CSSでは色を定義するカスタム・プロパティーを上書きする。このウェブサイトではすべての色をカスタム・プロパティーで集中管理しているので、これだけで黒背景に白い文字へ変更できる。
将来は、ユーザーの環境をトリガーにしたメディア・クエリーだけで書けるはずだ。周辺光量を拾えるようにもなるので、昼から雨戸を閉めていて部屋が暗いというような場合にも適応できるかもしれない。
夜間モードの必要性
夜間モードは、夜間の照明環境における目への負担を軽減することが目的だ。最近は多くのアプリケーション(やウェブアプリ、以下同様)で見かけるようになった。
OSで提供される色の反転などは、ユーザーの抱える問題を画一的に解決する。それに対し、アプリケーションで提供される夜間モードは、そのアプリケーションが夜間にのみ抱える問題の解決策を提示する。結果と実装は似るか、同じだが、解決する問題が違う。
また、夜間モードはそのアプリケーションに最適化した形で実装できるので、よりよい結果を提供できるかもしれない。色の反転では失われてしまうかもしれないコーポレート・カラーを維持することも不可能ではないはずだ。
このように一定の効果が夜間モードには見込める。主に文書を扱うアプリケーションでは、採用を積極的に考えても良いだろう。
ウェブサイトでの振る舞い
多くのブラウザーがウェブページを読みやすくするリーダー・モードを持っているので、ウェブサイトではそれで十分かもしれない。しかし、リーダー・モードは主にウェブページが読みづらいため使われる機能なので、ユーザーが使う時点でそのウェブページは何らかの問題を抱えている、と言える。ウェブサイトに最適化された夜間モードにより、問題がいくつか解決され、リーダー・モードが使われてしまう機会を減らせるかもしれない。
また、アプリケーションと違い、ウェブサイトでは夜間モードを強制しても良いだろう。アプリケーションの色がコロコロ変わると操作性に著しい悪影響を及ぼす。しかし、ウェブサイトは操作性という観点が薄く、短期間の滞在に終わり、通常は日に何度も訪れない。そのため時間によって色が違っていてもユーザーに影響はほとんどないからだ。
その一方で、ユーザーが明示的に有効にしない場合、いつも色が違う印象になりかねない。すると、ユーザーのウェブサイトに対するイメージが安定しない、という問題が発生する。そういった点は、ロゴや強調色をうまく最適化することで対処するしかないだろう。
当初採用した、オレンジ色のハイパーリンクは、なんというかしっくりこない。白背景で青なので、黒背景ならオレンジでも良いはずだが、なぜかしっくりこない。リンクは青色というような先入観の話ではなく、オレンジが持つ印象がしっくりこないのかもしれない。