ウェブ開発者向け – アダプティブテーマカラー

This post is also available in: English Français Deutsch Српски Português Български 简体中文

製品： デスクトップ版、Android 版、iOS 版 Vivaldi

アダプティブテーマカラーを使用して、タイトルバー、タブバー、アドレスバー、ステータスバーなどを含む Chrome ブラウザでウェブページにアクセントカラーを設定することができます。例えば、Chrome ブラウザにライトな抹茶グリーンカラーを適用する場合は以下のようになります：

<meta name="theme-color" content="#8ba888">

Vivaldi はドキュメントで一番最初に <meta> と名付けられている要素を使用します。

アダプティブテーマカラーはデフォルトで有効になっています。機能はカスタムのテーマを使用することで無効にできます。

デスクトップ版や Android 版 Vivaldi では、適切なメディアクエリを使用してライトテーマとダークテーマそれぞれに異なる色を設定できます。例えば、ライトモードにはライトな抹茶グリーンカラー、ダークモードにはダークな抹茶グリーンカラーを適用する場合は以下のようになります：

<meta name="theme-color" content="#8ba888" media="(prefers-color-scheme:light)">>
<meta name="theme-color" content="#44624a" media="(prefers-color-scheme:dark)">

Android 版と iOS 版 Vivaldi では、content プロパティに対する動的なアップデートは無視されます。これらのプラットフォームのテーマカラーは、ドキュメントの初期化時にのみ設定されます。

デスクトップ版 Vivaldi では、テーマカラーに対する急激な変更は遅れて反映される可能性があります。ドキュメントでテーマカラーが何度も変更されないようにしてください。

一部のテーマカラーのぼかしや彩度は、ツールバーのテキストやアイコンと十分なコントラストを保つため、多少調整される可能性があります。