世の中は新型コロナウイルスの影響で、テレワークやら在宅勤務やら家で仕事する人たちが増えてるようですが、私は10年以上も在宅勤務している在宅ワークのプロフェッショナル！
仕事のスタイルは全く変わってないのですが、若干仕事が減った感がありますので、空いた時間を使って今までやりたかったことを進めていきます。
やりたかったことの1つ目は「ダークモード」！
OSを始め各種ブラウザではほとんど実装されていますが、去年くらいからウェブサイトでの実装もトレンドになっています。
ダークモードにすると省電力や眼の負担軽減にもつながるので、今後もどんどん増えていきそうですね。
さて本題です。
画面右下のスイッチをオンにすると画面が「ダークモード」に切り替わるようになりました。
仕組みとしては、スイッチをオンにするとJavaScriptで<body>に「dark-theme」というクラスが入り、CSSで色を変更するという仕組みです。
ただこれだけだと、ページ遷移のたびにモードが戻ってしまうので、ウェブストレージを使ってブラウザに情報を保存しています。
ダークモード実装にあたり、テーマもリニューアル。
いろいろ直したい箇所もあったので、今までのをデザインテイストを残しつつもイチから作り直しました。
実装にあたり参考にしたサイトは以下の2サイト。ありがとうございます。