ダークモードに対応する方法。ダークモードに対応する方法。AlfredのPowerpackを利用して、ダークモードとライトモードを切り替える方法ダークモードに対応する方法。modesvgさて、いま見えています。このページは背景が白でしょうか?もし白の方は、ダークモードを利用されてない方ということになります。背景が黒く見えている方は、ダークモードを利用されていますね!通常モード(ライトモード)ダークモード今回は本サイトが、OSなどの機能として提供されているダークモードについてCSSで対応しましたのでその方法や流れなどをお伝えいたします。例としてはこんな感じです。}}はい!これだけです!簡単ですね。あとは、この中にそれぞれ色として変更スべきところをどんどん追加していきましょう。ダークモードはお好きですか?昨今、流行りの機能ともいえるダークモードですが、そもそも利用されてますか?私は、ダークモードが利用できるようになってからも全く利用していませんでした。最近スマホやPCを新しくしたときに、ふと使ってみようかなーというぐらいの気持ちで使い出したところです。実際に使ってみると、たしかに目が楽な気がするなんだか、TwitterやYahoo乗換案内などもアプリも対応してきてる今後はある方が良さそう。いう感想を持ちました。これから徐々に徐々にということにはなりそうですが、私は今よりもより広まっていくのではないかなーと感じております。ロゴのダークモード対応についてSVGを利用するもともと。画像でサイトのロゴを出していました。こちらの画像だと、背景が抜けてないですし、背景を抜いた透過pngなどにしたとしても、文字色をダークモード時には変更しなければいけません。素敵なロゴ!そこで、対応としてSVGを利用しました。SVGだとCSSで色を変更できるので、ダークモード時の対応してシンプルにできますね。凝ったことをするわけでもないので。イラストレータで描いた後、SVGで保存して利用しています。作成したものをコピーしてメモ帳などに貼り付ければ、コードして利用できます。イラストレータからSVGを利用する方法は以前の記事を御覧ください。色変更はCSSを以下のようにしました。#fff;}もう少し、良い方法もありそうですが。ロゴもロゴなのでとりあえず表示できて、色が変われば十分かなと思っています。素敵になったロゴ!ダークモードとライトモードを切り替えるダークモードでサイトのCSSを修正している時に気がつくのは、ライトモードだとどう見えているのか?ダークモードだとどう見えているのか?という両方の状態を確認しながら、作業をしなければいけないということです。これを怠ると、うっかり、黒背景に黒文字がでて読めない!みたいなことがあるんですね。そこで、簡単にダークモードとライトモードを切り替えたいのですが、その都度システムの設定から変更するのは少し面倒です。modeこちらMac限定です。Alfredを利用していて、さらにPowerpackの拡張機能を利用している人限定となりますが、この条件を満たしている場合に朗報です。Modeというのが開き、こちらを選択すれば、ダークモードとライトモードを行ったり来たりできます。便利!導入にはnpmのコマンドを利用します。最近のAlfredの拡張機能ってnpm経由で提供されてるんですね。そのことも今回始めて知りました。alfred-dark-modeというわけで、ダークモードの対応方法でした。気分を変えたい時にいいんじゃないでしょうか。自分のサイトをカスタマイズするのは楽しいですし。よかったらやってみてくださいませ。雑記AMP対応でもソースコードを見やすく、表示したい。雑記megane9988。