SVGファビコンのカラーをダークモード時にCSSで変更できるの知ってた？
Post on:2020年7月13日
sponsors
ダークモードに対応している時に、SVGファビコンのカラーをCSSで変更するテクニックを紹介します。
当ブログはダークモードに対応していませんが、ダークモードの周りもいろいろ充実してきましたね。
画像: ツイートより
元ネタは、下記ツイートからです。
💡 Change the color of your favicon when dark mode is enabled.#codyhousenugget pic.twitter.com/Hie9Pgt9MQ
— CodyHouse (@CodyWebHouse) July 7, 2020
ファビコンをSVG画像にする利点は、スクリーンの解像度を気にすることなく、1つのファイルでファビコンを提供できることです。対応ブラウザはIEを除く、すべての主要なブラウザでサポートされています。
ファビコンをSVG画像にする際は、下記のように記述します。
|
1 2 3 |
<head> <link rel="icon" type="image/svg+xml" href="/favicon.svg"> </head> |
SVGファビコンのカラーをダークモード時に変更するには、.svgを編集します。
<svg>要素内に<style>を加え、fillプロパティでカラー値を定義します。ダークモード用のカラーは、メディアクエリでprefers-color-scheme: darkを使用します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> <style> path { fill: #212121; <!-- ライトモード時のカラー --> } @media (prefers-color-scheme: dark) { path { fill: white; <!-- ダークモード時のカラー --> opacity: 0.5; } } </style> <path d="M24,13.2V10.8H20.191a10.6,10.6,0,0,0-.228-1.44A10.145,10.145,0,0,0,22.2,3H19.8a7.738,7.738,0,0,1-.939,3.706,6.873,6.873,0,0,0-2.9-2.516,4.121,4.121,0,0,0-7.926,0,6.892,6.892,0,0,0-2.9,2.516A7.748,7.748,0,0,1,4.2,3H1.8A10.145,10.145,0,0,0,4.037,9.36a10.6,10.6,0,0,0-.228,1.44H0v2.4H3.845a11.117,11.117,0,0,0,.279,1.326A10.156,10.156,0,0,0,1.8,21H4.2a7.732,7.732,0,0,1,.985-3.783C6.746,20.245,9.372,22.8,12,22.8s5.254-2.555,6.815-5.583A7.732,7.732,0,0,1,19.8,21h2.4a10.156,10.156,0,0,0-2.324-6.474,11.117,11.117,0,0,0,.279-1.326Zm-17.4-3a1.8,1.8,0,1,1,.527,1.273A1.8,1.8,0,0,1,6.6,10.2ZM12,18a2.4,2.4,0,1,1,1.7-.7A2.4,2.4,0,0,1,12,18Zm3.6-6a1.8,1.8,0,1,1,1.273-.527A1.8,1.8,0,0,1,15.6,12Z"/> </svg> |
これで、ライトモード時はブラックに、ダークモード時はホワイトになります。
ツイートに合わせて、記事も公開されました。
sponsors
