ブログをダークモードに対応した

Web ではダークモードにどう対応させるのか

実はすでに、CSSのメディアクエリに指定の記述を書くだけで簡単にダークモードに対応できます。

OSレベルでダークモードが設定されている場合に当てるスタイルをCSSで定義できます。

その方法がこちら。

@media (prefers-color-scheme: dark) {
  body {
    background-color: #000;
    color: #fff;
  }
}

こんな感じで、ダークモードだったときのスタイルを定義してあげるのみになります。

本ブログはめちゃくちゃ雑ですが、こんな感じで対応してみました。

本来なら、 CSSの :root と色の定義をしてあげることで、light モードと dark モードの切り替えを簡単にできるようになるのですが、そこまでの変更のモチベーショが上がって来ず、取り急ぎの対応にしていますｗ

ダークモードのときに、画像をそのまま出力すると、どうしても画像だけ眩しく感じてしまいます。元画像から少し輝度が下がるような見た目になるよう、 img タグに対しては opacity を下げておくことをおすすめします。

ダークモードを使っているときに、Whiteを使ってしまうと、どうしてもその部分が異様に眩しく感じてしまいます。

テキストカラーも含め、完全な白は使わないようにすると、グッと見やすいダークモード対応になりそうです。

本ブログでは相当手早く、最低限のダークモード対応を行いましたが、見やすくなったでしょうか？

勉強がてら試してみるというのもアリなきがするので、まだ試したことないよ。って方はぜひやってみてください！