わたしがこのサイトをとりあえず公開して真っ先に追加した機能。

それは（意外にも）ダークモードだ。

ダークモードとは文字通り黒を基調としたUIで、スマホやPCにも標準で実装されている。

数は少ないものの、ユーザーの閲覧しているデバイスの情報を取得し、ダークモードの時は黒基調になるWebサイトもある。

しかし割と大手のサイトでも対応が中途半端で、背景は黒くなるのに字が白くならず全く読めなくなってしまうことも。

ダークモードをさっそく実装した理由は何よりわたし自身のためである。

自分のサイトの開発作業はほとんどの場合、終業後、夜に行っている。

明るく真っ白基調な画面を夜な夜な見続ければ目にも睡眠の質にも支障が出かねない。

今まさに深夜2時にこのサイトを見ているけれども、うん、なかなか悪くない、と思う。

まぁデザイン性は下がってしまうけれど、そもそも目の保護のためなので目的が異なる。

もうひとつこだわったポイントはモードを切り替えてページを遷移してもそのモードを維持し続けることである。

これはおそらく多くのサイトで行っていないことだと思う。病院などのアクセシビリティに気を使うサイトでもいくつか見た限りでは、ページ遷移したら元に戻ってしまった。

このサイトではvue.jsのデータバインディングとローカルストレージを使って、ページ遷移後も設定を反映し続けることができたので満足している。

どこかの記事で読んだけど、ダークモードとは本当に真っ黒基調でなければならないらしい。カラーコード#000である。

光に非常に過敏な方の場合、黒っぽいけど真っ黒でない色だとそれでもかなりまぶしく感じてしまうそうで。

ということは（おそらく）それほど過敏な人でなくとも、黒っぽい色と真っ黒では目への影響も変わりそうなものである。

故に背景はもちろん#000。

モードの切り替えボタンは仮で太陽と月にして、画面右上に固定させてみた。なんかあんまり見ない配置で面白いのでこのままにしておこうと思う。

ダークモードだけでなかなかの長文を書いてしまった。今日はここまで～。