ダークモードのSVGロゴ：色を決める仕組みとページテーマを選ぶ
SVGロゴをユーザーの設定とページテーマのどちらに従わせるか決めます。インラインCSS、テーマ対応の外部ファイル、固定色の図案をブラウザーで比較します。
目次
ダークモードのSVGロゴには、テーマ情報をどこから得るかの明確な指定が必要です。インラインSVGのパスは、ページのCSSで装飾できます。画像要素で読み込む外部SVGは独自のスタイル環境を持ちますが、内部のprefers-color-schemeクエリーは、埋め込み要素のカラースキームに応答できます。手動のテーマクラスとユーザーのライト／ダーク設定は別の入力です。どちらで図案を制御するか決めてください。
承認済みの明るい面用、暗い面用の版があるなら、それを残します。すべての色を反転すると、アクセントが変わったり、意図した輪郭が消えたり、未承認のロゴになったりする場合があります。テーマ対応は、図案そのものが正しくなった後の、配色と組み込み方の判断です。
ユーザー設定とページテーマを分ける
CSSの**prefers-color-schemeメディア特性**は、ブラウザーやOSから伝えられるライト／ダークの設定を検出します。MDNは、その設定の入力元を説明しています。 サイト独自のdata-theme="dark"属性は、CSSやコードで効果を与えるまでは、単なるアプリの状態です。
この違いで、よくある不一致を説明できます。ブラウザーの設定はライトのままでも、訪問者が1つのサイト内で暗い背景を選ぶ場合があります。設定だけに従うロゴは、暗いページでも明るい面用の色を保つことがあります。
color-schemeプロパティは、また別の設定です。要素が対応するスキームをブラウザーに伝えますが、作者が指定したすべての塗りを自動で作り直すわけではありません。MDNのプロパティ解説は、ブラウザーが管理する描画と、作者が別途用意するテーマの装飾を区別しています。
| 制御するもの | 組み込み方 | 確認すること |
|---|---|---|
| アプリの手動テーマ | ページのテーマセレクターでインラインのパスを装飾 | ページテーマを変えると、ロゴの両方の色が変わるか |
| 埋め込み先の面のスキーム | 独自のメディアルールを持つ外部SVGと、適切なホストのカラースキーム | 同じファイルが各ホストで意図した色を選ぶか |
| 提供された固定のブランド版 | アプリで適切な承認済みアセットを選択 | 選んだファイルが面に合い、名前も正しいか |
独立したテーマ機構を3つ追加し、一致することを期待しないでください。見える色を調べる前に、どれで制御するか明示します。
手動テーマのインラインロゴにはページのセレクターを使う
インラインSVGはページ文書に属するため、対象を絞ったセレクターでパスに到達できます。インラインSVGと画像の比較で、そのアクセスの境界を詳しく説明しています。
主形状と独立した円形アクセントという、2つの配色役割を持つF字形マークを作りました。説明用の色は独自に選んだもので、ブランド基準ではありません。
.ink { fill: #183c35; }
.accent { fill: #c58868; }
[data-theme="dark"] .ink { fill: #f5f0e7; }
[data-theme="dark"] .accent { fill: #ffc34d; }サイト内のすべてのパスではなく、対象のインライン図案にこれらの規則を適用します。ロゴには、複数の意図した塗り、マスク、グラデーションが含まれる場合があります。SVGの色変更ガイドは、スタイルを変える前に、何が実際に形状を塗っているかを調べる方法を扱います。
形状を要素の文字色と共有したい場合は、currentColorが便利です。多色ロゴの必須条件ではありません。異なる色が必要なデザインではアクセントを分け、想定する各背景でマーク全体を確認します。
外部SVGでは、ファイル自身にメディアルールを持たせる
外部画像は別のスタイル環境です。HTMLの画像要素にcolor: rebeccapurpleを設定しても、内部の任意のパスに届いて色を変えることはできません。SVGファイル内のcurrentColorも、自動的にホストページの文字色になるわけではありません。
代わりに、ファイル内に独自のテーマ規則を入れられます。次は、独自の試験で使った小さなテーマ対応SVGの全体です。
<svg xmlns="http://www.w3.org/2000/svg" width="140" height="105"
viewBox="0 0 140 105">
<style>
.ink { fill: #183c35; }
.accent { fill: #c58868; }
@media (prefers-color-scheme: dark) {
.ink { fill: #f5f0e7; }
.accent { fill: #ffc34d; }
}
</style>
<path class="ink" d="M15 15H85V30H33V48H70V63H33V90H15Z"/>
<circle class="accent" cx="102" cy="73" r="17"/>
</svg>埋め込みSVG画像では、その設定クエリーが、埋め込み要素で実際に使われているカラースキームを反映できます。CSS Color Adjustment仕様が、この関係を説明しています。これはスキームの信号であり、ホストページの通常のCSSセレクターがファイル内へ入ることではありません。
この試験ページでは、片方のホストにcolor-scheme: light、もう片方にcolor-scheme: darkを明示しています。どちらも同じテーマ対応ファイルを読み込みます。背景色と文字色も意図して作っています。プロパティを設定するだけでは、それらの完全なスタイルは得られません。
この方法でアプリがテーマを制御する場合は、ホストのスキームもその選択に合わせます。背景が暗くても、ホストがライトを宣言したままだと、意図しない信号を送る場合があります。
実際のブラウザーで3つの方法を比較する
独自のHTML試験ページでは、上段に2つの固定スキームのホストがあります。その下では、ボタンでページの手動テーマを変え、インラインのマークと固定色の外部画像を表示します。外部の対照ファイルには同じ形状がありますが、ダークテーマのメディアルールはありません。
ブラウザーはユーザー設定をライトと報告しました。手動テーマのボタンを押すと、インラインの主な塗りはrgb(24, 60, 53)からrgb(245, 240, 231)に、アクセントはrgb(197, 136, 104)からrgb(255, 195, 77)に変わりました。設定の表示はライトのままです。色を変えたのはページ自身のセレクターです。
上段の2つの画像は、それぞれのホストのスキームで選ばれたライト用とダーク用の色を表示しました。固定色の外部画像は、周囲の面が暗くなり、HTML画像要素の計算済みcolorが紫になっても、緑と銅色の図案を保ちました。
計算済みスタイルと実際の描画結果を調べました。3つの外部画像はすべて自然寸法140 × 105で読み込まれ、280 × 210で表示されました。この試験で確認できるのは、このブラウザーセッションにおけるこれらのファイルの挙動です。複数ブラウザー、メールクライアント、PDF書き出し、OSの切り替えを試したものではありません。
単体ファイルだけでなく、最終的な使い方を試す
元のSVGを単独で開いて形状を確認し、次に実際のページへの埋め込みを通して調べます。両方のテーマ状態、アクセント、透明な開口部、すぐ周囲の背景を確認します。レスポンシブなロゴは、狭いサイズで構成も変える場合があります。その別の判断はレスポンシブなロゴ構成のガイドで扱います。
外部SVG画像には制限があります。MDNはスクリプトが無効になり、外部リソースが制限されると説明しています。 ここで示す方法では、必要なスタイルをアセット内に置き、実際の配信先で試します。ブラウザーの結果は、メール表示やデザインアプリへの読み込みで同じ挙動を保証しません。
適したロゴがPNGやJPEGでしかない場合は、PerfectVectorのロゴのベクター化手順で候補SVGのパスを再構築できます。テーマ別の版を作る前に、シルエット、文字、小さい隙間を元画像と比較します。ベクター化は、意味に応じた配色役割の割り当て、アプリのテーマ処理の追加、ブランドの反転版の承認を行いません。この試験マークは、ベクター形状として直接作りました。
よくある質問
暗いページなら、外部SVGロゴは自動で色が変わりますか？ いいえ。画像内部の配色規則が引き続き関係します。テーマ対応の外部SVGは、埋め込み要素のカラースキームに応じた独自の設定クエリーを使えますが、固定色SVGは元の色を保つことがあります。
手動のダークテーマクラスは、prefers-color-schemeを変えますか？ それだけでは変わりません。クラスやデータ属性はアプリの状態です。この試験では、ページの手動テーマが変わっても、ブラウザーのユーザー設定クエリーはライトのままでした。
ダークモードでは、SVGロゴの色を全部反転すべきですか？ 承認済みの版があるなら使ってください。一括反転でデザインが保たれると考えず、対象の背景で主色、アクセント、輪郭、開口部を確認します。
出典
- MDN：prefers-color-scheme：ユーザー設定の入力元と、埋め込みSVGの挙動です。
- MDN：color-scheme：対応スキームと、作者が別途行う装飾の責任です。
- CSS Color Adjustment：使用するカラースキームの効果：埋め込み内容に渡されるスキームの信号です。
- MDN：画像としてのSVG：画像として使う場合のスクリプトとリソースの制限です。
ラスターしかないロゴから編集可能なパスが必要ですか？ 候補SVGを作成して調べ、採用したマスターを残してから、配色役割を定義し、実際のテーマ付きページで試してください。
