Vivaldi Adaptive Theme Colors for Web Developers

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

Products: Vivaldi for desktop, Android, and iOS.

Adaptive Theme Colors let webpages set the accent color in the browser chrome, including the Title Bar, Tab Bar, Address Bar, Status Bar, and more. For example, to apply a light matcha green color theme to the browser chrome:

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

Vivaldi uses the first named <meta> element in the document.

Adaptive Theme Colors is enabled by default. The feature may be disabled by custom themes.

In Vivaldi for desktop and Vivaldi for Android, you can set different colors for light and dark theme color preferences using the appropriate media queries. For example, to apply a light matcha green theme color in light mode and a dark matcha green theme color in dark mode:

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

In Vivaldi for Android and Vivaldi for iOS, dynamic updates to the content properties are ignored. The theme color on these platform is only set during the initial document initialization.

In Vivaldi for desktop, rapid changes to the theme color may be delayed. You should ensure that your document does not change its theme color too often

The hue or saturation of some theme colors may be adjusted slightly to ensure enough contrast with toolbar text and icons.