2020-07-01

模造紙風の背景色

ユーザーがアクセスした時間に応じて、背景色とハイパーリンクの色が変わるようになった。10秒おきに再読み込みすると変わるのが確認できる。模造紙のような色で、ちょっと懐かしい。すぐ飽きて戻すと思うが、現時点では気に入っている。緑(105度)と紫(285度)が見やすいと思う。

当初はDay of the Yearで変わるようにしようと考えていた。しかし、これでは変化に乏しいし、DotYを計算するのが面倒(うるう年とか)だし、360におさまらないのをどうなじませるか考えるのも面倒だったので、秒数を使うことにした。

const seconds = Math.floor((new Date()).getSeconds() / 10);
const hue = seconds * 60 - 15;

秒数をそのまま使い、色のバリエーションは60種類にしても良かったが、ハイパーリンクのコントラスト要件が満たされるかどうかを確認するのが大変で、6種類に絞った。つまり秒数を10で割った商に60を掛け、60刻みで0から300まで作り、それを色相に設定する。60の倍数だときれいな色になりやすいので、15度だけ反時計回りに回して、若干ずらした。

const lightness = ["49%", "34%", "33%", "33%", "52%", "50%"];

彩度は50%で固定し、明度は使われる場所で使い分ける。前バージョンのカラー・パレットと同じく、背景色なら95%、文字色なら10%にしている。ハイパーリンクの色は、背景色と文字色の両方とコントラスト比を確保したいので、手作業で適切な明度を探し、色相に応じて選択できるようにした。

document.documentElement.style = `--hue:${hue};--lightness:${lightness[seconds]}`;

最後に生成した色相と明度をカスタム・プロパティーで仕込むだけだ。ここではルート要素のstyle属性に仕込んだが、style要素を作ってもいい。

:root {
  --hue: -15;
  --lightness: 49%;

  --color-primary: hsl(var(--hue) 50% 10%);
  --color-secondary: hsl(var(--hue) 50% var(--lightness));
  --color-background: hsl(var(--hue) 50% 95%);
  --color-surface: hsl(var(--hue) 50% 92%);
}

hsl()関数の中でもカスタム・プロパティーが使えるので、CSSはこのように書ける。ちょうど4色まで減らしていたところだったので、調整することもなくちょっと書き換えるだけで済んだ。

テーマ・カラー的なものがなくなってしまった。その一方で、無個性なようでいて主張が強い色とも言える。ダーク・モードへの反発で、軽やかな色構成に魅かれており、こういうものも作ってみたかった。スクロールと共に変化しても面白そうだが、コストが高いのでやめておく。onscroll100vhなどという組み込みイベントができたら、実装したい。