Vivaldi Adaptive Theme-Farben für Webentwickler

Dieser Beitrag ist außerdem verfügbar in:

Produkte: Vivaldi für Desktop, Android und iOS.

Mit adaptiven Designfarben können Webseiten die Akzentfarbe im Browser-Chrome festlegen, einschließlich der Titelleiste, der Tab-Leiste, der Adressleiste, der Statusleiste und mehr. So wenden Sie beispielsweise ein helles Matcha-Grün-Farbthema auf das Browser-Chrome an:

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

Vivaldi verwendet das erste benannte <meta> Element im Dokument.

Adaptive Designfarben sind standardmäßig aktiviert. Die Funktion kann durch benutzerdefinierte Designs deaktiviert werden.

In Vivaldi für den Desktop und Vivaldi für Android können Sie mit den entsprechenden Medienabfragen unterschiedliche Farben für helle und dunkle Designfarbeinstellungen festlegen. So wenden Sie z. B. eine helle Matcha-grüne Designfarbe im hellen Modus und eine dunkle Matcha-grüne Designfarbe im dunklen Modus an:

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

In Vivaldi für Android und Vivaldi für iOS werden dynamische Aktualisierungen der content Eigenschaften ignoriert. Die Designfarbe auf diesen Plattformen wird nur während der anfänglichen Dokumentinitialisierung festgelegt.

In Vivaldi für den Desktop können sich schnelle Änderungen der Designfarbe verzögern. Sie sollten sicherstellen, dass Ihr Dokument seine Designfarbe nicht zu oft ändert

Der Farbton oder die Sättigung einiger Designfarben kann leicht angepasst werden, um einen ausreichenden Kontrast zum Symbolleistentext und den Symbolen zu gewährleisten.