アシアルブログスマートフォン用の表示で見るアシアルブログアシアルの中の人が技術と想いのたけをつづるブログです2019-10-30アイコン画像を含めたWebサイトのダークモード対応を実現するCSSの話Tweetこんにちは、鴨田です。最近、仕事でダークモード対応することがあり、各種アイコンなどの対応で行ったことを書き記します。ダークモード対応のCSSの基本まずは、普通にダークモード対応のCSSを作成しましょう。必要最小限のHTML(とCSS)のサンプルです。<h1>モードです</h1></body></html>かんたんですね。//ここにダークモード時のCSSを記述します}これだけです。文字列がライト:ダークにそれぞれ切り替わります。アイコン用の画像を用意するそして、本題のアイコンのダークモード対応です。行うこととしては、アイコン画像を用意します。透過PNGでもマスク画像にはできますが、出来ればSVG形式の画像が良いです。解像度の高いアイコンPNG画像であれば、それでも構いません。Illustratorを使用して、いくつか方法でSVG形式での書き出しが可能です。次の1と2/3ではSVGの中身が異なりますが、バージョンによる違いです。1はSVG1.1での書き出し、2/3はSVG2.0での書き出しになります。->アセットの書き出しウィンドウ内の「形式」を「SVG」にして「書き出し」3.の方法が一番手軽にできるのではないかと思いますが、SVG1.1だけにしか対応してないブラウザもあるので、1の方法を推奨します。画像の用意ができたら、HTMLとCSSを記述します。ここでは、アシアルロゴのSVG画像を使用します。先程のHTMLにロゴ画像の記述の追加を行います。class="asial-logo"></div></body></html>ポイントとしては、画像を、imgタグ、あるいは、divタグなどのbackgorundプロパティ、で設定するのではなく、divタグなどの-webkit-maskプロパティに使用して、色をbackgroundプロパティで指定するということです。このサンプルでは、モードに応じて、アシアルロゴがライトモード:シンボルマークがオレンジ、ロゴタイプが黒ダークモード:シンボルマーク、ロゴタイプともに白に切り替わります。各モードでのHTMLの確認スクリーンショットiframeによるデモページdemo.asial.co.jpまとめいかがでしたでしょうか。かんたんにアイコンを含めたダークモード対応が出来たのではないでしょうか。これを機会に、ぜひ皆様の管理されているWebサイトをダークモード対応してみてください。byスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。