<meta name="theme-color">
meta name="theme-color" はブラウザのアドレスバーやタブの色を指定します。media 属性でダークモード対応も可能です。
概要
meta name="theme-color" はブラウザのアドレスバーやタブの色を指定します。media 属性でダークモード対応も可能です。
対応ブラウザ
デスクトップ
Chrome 未対応
Edge 未対応
Safari 15+
Firefox 未対応
モバイル
Chrome Android 92+
Safari iOS 15+
Firefox Android 未対応
基本構文
HTML
<meta name="theme-color" content="#3498db">
<meta name="theme-color"
media="(prefers-color-scheme: dark)"
content="#1a1a2e">実務での使いどころ
-
<meta name="theme-color"> の活用
テーマカラーのmeta要素。ブラウザUIの配色を指定。
注意点
- 一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。