こんにちは、ウェブラボクリエイターズメモです。
OSのテーマカラーを暗くする「ダークモード」。
2020年頃からトレンドになっており、多くのOSやアプリ、ウェブサイトもこのダークモードに対応したものが増えてきています。
詳しくは過去の記事でも触れていますので、気になる方はぜひご覧ください。
2020年のWebデザイントレンド「ダークモード」とは？
→弊社デザイナーの記事です！
それでは本題
今回はfaviconをダークモードに対応させる方法をご紹介します。
まず前提として
・faviconはSVG形式で作成する
・Mac Safariでは未対応なので、従来のico(またはpng)も併記する(2021年12月現在)
という点に注意が必要です。
SVGの記述方法
SVGのソースに<style>タグを作成し、以下のように記述します。
<svg ・・・>
<style type="text/css">
/*基本の色を設定*/
.st0{
fill: #ff0000;
}
@media (prefers-color-scheme: dark) {
/*ここにダークモードの色を設定*/
.st0{
fill: #0000ff;
}
}
</style>
<g>
<path class="st0" d="・・・"></path>
<path class="st0" d="・・・"></path>
<path class="st0" d="・・・"></path>
<path class="st0" d="・・・"></path>
</g>
</svg>
今回はフリーのアイコンをお借りして
通常モードで赤、ダークモードで青になるSVGアイコンを作成しました。
これをSafari用にico(またはpng)としても書き出し、<head>タグに記述しましょう。
<link rel="icon" sizes="16x16" href="favicon.ico"> <link rel="icon" type="image/svg+xml" href="favicon.svg">
これで完了です。
faviconを黒っぽくしている場合、ダークモードで見えづらいなんて場合もあるかもしれません。
そんなときに便利ですね！
以上、ウェブラボクリエイターズメモでした。
The post SVG形式のfaviconをダークモードに対応させる方法 first appeared on ウェブラボ（株）スタッフブログ.
