ロゴの実装
決めた版を、画面の上でそのまま保つための書き方です。1色版は currentColor で持つと、明暗の切り替えに自動で追従します。
1色版は currentColor で持つ#
実表示 同じ図形を明暗の地で表示
灯火
灯火
白1色と黒1色の版を画像で2枚書き出すより、SVG の塗りを currentColor にして1つで持つほうが崩れません。ロゴが文字色を継承するので、暗い地の上では周りの文字と一緒に反転します。
このコードで動いている見本です
このコードで動いている見本です
色つきの正式版とこの1色版のどちらを使うかは、場面で決めます。帯や写真の上は1色版です。
明暗で別の版に切り替える#
実表示 地の明るさで読み分ける版
灯火焙煎所表示設定に合わせて版を選ぶ
色数の多いロゴを画像で置くなら、picture で明暗2枚を切り替えます。width と height は必ず書きます。
このコードで動いている見本です
SVG の中に prefers-color-scheme の分岐を書いておけば、1ファイルでも両対応にできます。この資料の図版と同じ作り方です。
ファビコン一式#
実表示 32pxでも判別できる専用図案
灯火焙煎所
ロゴの縮小ではなく、シンボルだけの専用図案を使います。
このコードで動いている見本です
- SVG 版が本命。対応しない環境向けに PNG を残す
- apple-touch-icon は 180×180。角丸は OS が付けるので、元画像は四角のまま
- 図案には地の色を敷く。タブの背景は明暗どちらもあり得る
確認する#
- 深色パネルの上で、ロゴが1色で反転している
- OS の表示を暗い設定に切り替えても、ロゴが地に沈まない
- タブとブックマークで、ファビコンがどのサイトか判別できる