Couleurs du thème adaptatif Vivaldi pour les développeurs Web

Cet article est aussi disponible sur : English 日本語 Deutsch Српски Português Български 简体中文

Produits : Vivaldi pour ordinateur de bureau, Android et iOS.

Les couleurs de thème adaptatives permettent aux pages Web de définir la couleur d’accentuation dans le navigateur Vivaldi, y compris la barre de titre, la barre d’onglets, la barre d’adresse, la barre d’état, etc. Par exemple, pour appliquer un thème de couleur vert clair au navigateur Vivaldi :

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

Vivaldi utilise le premier élément nommé <meta> du document.

L’option Couleurs adaptatives du thème est activée par défaut. La fonctionnalité peut être désactivée par des thèmes personnalisés.

Dans Vivaldi pour ordinateur et Vivaldi pour Android, vous pouvez définir différentes couleurs pour les préférences de couleur de thème clair et sombre à l’aide des requêtes multimédias appropriées. Par exemple, pour appliquer une couleur de thème vert matcha clair en mode clair et une couleur de thème vert matcha foncé en mode sombre :

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

Dans Vivaldi pour Android et Vivaldi pour iOS, les content mises à jour dynamiques des propriétés sont ignorées. La couleur du thème sur ces plates-formes n’est définie que lors de l’initialisation du document.

Dans Vivaldi pour ordinateur, les changements rapides de la couleur du thème peuvent être retardés. Vous devez vous assurer que votre document ne change pas trop souvent la couleur de son thème

La teinte ou la saturation de certaines couleurs de thème peut être légèrement ajustée pour assurer un contraste suffisant avec le texte et les icônes de la barre d’outils.