SVGファビコンのカラーをダークモード時にCSSで変更できるの知ってた?

ダークモードに対応している時に、SVGファビコンのカラーをCSSで変更するテクニックを紹介します。

当ブログはダークモードに対応していませんが、ダークモードの周りもいろいろ充実してきましたね。

CSSで、SVGファビコンのカラーをダークモード時に変更する実装方法を解説

画像: ツイートより

元ネタは、下記ツイートからです。

ファビコンをSVG画像にする利点は、スクリーンの解像度を気にすることなく、1つのファイルでファビコンを提供できることです。対応ブラウザはIEを除く、すべての主要なブラウザでサポートされています。

サイトのキャプチャ

SVGファビコンのサポートブラウザ

ファビコンをSVG画像にする際は、下記のように記述します。

SVGファビコンのカラーをダークモード時に変更するには、.svgを編集します。
<svg>要素内に<style>を加え、fillプロパティでカラー値を定義します。ダークモード用のカラーは、メディアクエリでprefers-color-scheme: darkを使用します。

これで、ライトモード時はブラックに、ダークモード時はホワイトになります。

ツイートに合わせて、記事も公開されました。

サイトのキャプチャ

SVG favicon in dark mode

sponsors

top of page

©2020 coliss