CSSにWarmテーマを加えた

だいぶなんとなくである。

CSSについてはもともと2通り用意していて、最近世間では当たり前に使われているライトテーマとダークテーマだ。AIに相談しつつ、なるべく可読性の良い配色やサイズなどを留意しつつ、テキストサイトとしてなんとなくそれっぽい雰囲気が出るように微調整して作ったものだ。AI任せなので、実際にこれが人間にとって可読性の良いものだとは断言できないのであれだが。

であるのだが、どうもスマホで見ていると妙に目が疲れる気がする。おそらく白黒のコントラストが強すぎてそうなるのではないかと疑っているが、原因はよくわからない。ただ、ライトテーマ、ダークテーマを用意するなら、完全なモノクロが良いという注文をつけたのは自分なので、あまり文句は言えない。白黒が好きなのだ。

読者などいないこのサイトだが、実際読者が目にダメージを負っているかどうかはともかく、自分用にもう少し目に優しい配色を用意しようと思ったのが今回だ。

ミルク多めのコーヒー牛乳のような、AIに言わせるとグレージュトーンと呼ぶような今回の配色。わら半紙のような、古新聞のような、なんとなく落ち着いた雰囲気がしていて、嫌いじゃない。わら半紙って今もあるのか?

メインの色をAIに伝えてそれに合うような配色を自動で考えてもらったので、大きくずれてはいないと思うが、もしかしたら今後ちまちまと微調整を重ねるかもしれない。というか、ほぼすべてAIに任せていて自分では何もしてない。AI万歳!

CSSテーマを追加するにあたって、テーマを切り替えるボタンについても少し変更を加えた。ライトとダークのトグルだったものを、ライト、ダーク、ウォームの変遷式に変えたわけだが、今までは次の状態を表すアイコンにしていたのだが、今回は今の状態を表すアイコンに変更した。ステートが2パターンのときは、次の状態を表すというのがそれなりに意味が通ったのだが、3つに増えると何を表しているのかが、いまいち通りづらくなったように感じた。なので、現在のステートを表すアイコンになるように変更をしたのだが、アイコンが見た目と一致するようになって、ぱっと見の違和感はなくなったように思う。

このテーマ切り替えのアイコンを現在の状態にするか、切り替え先の状態にするかは、それなりに論争の種らしく、まだこれといったスタンダードな方法は決まっていないらしい。ここではひとまず現在の状態を表すという仕様でしばらく様子を見ることにして、やはり何か違うなとなったらまた変更したい。多分明日には忘れている。