tbsmcd.net index, archives, tags, search, profile Dark theme

blog ダークモード対応(1)やりたいこと・やるべきことの整理

Series: blogダークモード対応

  1. 2022-11-25 blog ダークモード対応(2)OS のモードに対応する方法
  2. 2022-11-24 blog ダークモード対応(1)やりたいこと・やるべきことの整理

用語の整理

 ダークモード、ダークテーマ……英語だと black mode, dark mode, dark theme, night mode など様々な呼び方があるようだ(Light-on-dark color scheme - Wikipedia)。ここでは

としたい。

なぜダークモードに対応したいのか?

 この blog を自分で見て眩しいと感じるから。

 ふだん自分が使っているデバイスはすべてダークモードに設定しているし、ターミナルや IDE もダークカラースキームで表示している。そんな中たまに真っ白な背景を見ると眩しい。この blog ももちろん同様に眩しい。補助的な理由としては簡単にできそうだから。ダークモード対応と大袈裟に言ってみても、 Web サイトである以上はダークカラースキーム自体は CSS で作れば良いだけだし、 OS のダークモード設定(or not)もおそらく JavaScript で取得できるのだろう(例えば Google 検索は OS のモード設定に従ってるし)……という軽い気持ち。やっておくと自分にとっても多少の知見にはなるだろうし。

どういうときにダークカラースキームを使いたいのか?

 前述したように自分自身にとっての問題が「ふだん暗い画面を見ていて、急に明るい画面をみたら眩しい」なので、 OS の設定がダークモードである場合には blog もダークカラースキームで表示したい。ただ人それぞれ好みや事情があるので選択の余地はあったほうが良さそうだ。OS はライトモードだけどこの blog は眩しく感じる人もいるだろう。

以上をベースに考える。

何が必要か?

これを実現するためには

これらが必要になる。


続く。

Tags: hugo CSS JavaScript