ダークモードに対応する方法。とAlfredのPowerpackを利用して、ダークモードとライトモードを切り替える方法

さて、いま見えています。このページは背景が白でしょうか？もし白の方は、ダークモードを利用されてない方ということになります。背景が黒く見えている方は、ダークモードを利用されていますね！

今回は本サイトが、OSなどの機能として提供されているダークモードについてCSSで対応しましたのでその方法や流れなどをお伝えいたします。

まずCSSについてメディアクエリのように、@media (prefers-color-scheme: dark) という書き方をします。例としてはこんな感じです。

@media (prefers-color-scheme: dark) {
  body {
    background-color: #15202b;
    color: #fff
  }
}Code language: CSS (css)

はい！これだけです！簡単ですね。あとは、この中にそれぞれ色として変更スべきところをどんどん追加していきましょう。ダークモードの逆のライトモードを設定する場合は@media (prefers-color-scheme: light) とかけばOkです。

ダークモードはお好きですか？

昨今、流行りの機能ともいえるダークモードですが、そもそも利用されてますか？私は、ダークモードが利用できるようになってからも全く利用していませんでした。ただ、最近スマホやPCを新しくしたときに、ふと使ってみようかなーというぐらいの気持ちで使い出したところです。

実際に使ってみると、

という感想を持ちました。これから徐々に徐々にということにはなりそうですが、私は今よりもより広まっていくのではないかなーと感じております。

もともと。画像でサイトのロゴを出していました。ただ、こちらの画像だと、背景が抜けてないですし、背景を抜いた透過pngなどにしたとしても、文字色をダークモード時には変更しなければいけません。

素敵なロゴ！

そこで、対応としてSVGを利用しました。SVGだとCSSで色を変更できるので、ダークモード時の対応してシンプルにできますね。

特に凝ったことをするわけでもないので。イラストレータで描いた後、SVGで保存して利用しています。作成したものをコピーしてメモ帳などに貼り付ければ、コードして利用できます。イラストレータからSVGを利用する方法は以前の記事を御覧ください。

色変更はCSSを以下のようにしました。

.site-logo svg {
    fill: #fff;
}Code language: CSS (css)

もう少し、良い方法もありそうですが。ロゴもロゴなのでとりあえず表示できて、色が変われば十分かなと思っています。

より素敵になったロゴ！

ダークモードでサイトのCSSを修正している時に気がつくのは、ライトモードだとどう見えているのか？ダークモードだとどう見えているのか？という両方の状態を確認しながら、作業をしなければいけないということです。

これを怠ると、うっかり、黒背景に黒文字がでて読めない！みたいなことがあるんですね。

そこで、簡単にダークモードとライトモードを切り替えたいのですが、その都度システムの設定から変更するのは少し面倒です。とおもってFacebookで発言してみたら、良いツールを教えてもらえました！

こちらMac限定です。しかもAlfredを利用していて、さらにPowerpackの拡張機能を利用している人限定となりますが、この条件を満たしている場合に朗報です。

アルフレッドをひらいて、darkと打ち込めば、以下のようにToggle Dark Modeというのが開き、こちらを選択すれば、ダークモードとライトモードを行ったり来たりできます。

Toggle Dark Mode 便利！

導入にはnpmのコマンドを利用します。最近のAlfredの拡張機能ってnpm経由で提供されてるんですね。そのことも今回始めて知りました。。

$ npm install --global alfred-dark-modeCode language: PHP (php)

というわけで、ダークモードの対応方法でした。ちょっと気分を変えたい時にいいんじゃないでしょうか。自分のサイトをカスタマイズするのは楽しいですし。よかったらやってみてくださいませ。ではまた！！