Changer dynamiquement la couleur de la barre d'adresse du navigateur Chrome Android
L'exemple suivant vous montre comment changer dynamiquement la couleur du thème du navigateur Chrome sous Android.
La balise meta theme color permet de modifier la couleur de la barre d’adresse de votre navigateur mobile.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- La balise meta pour la couleur du thème -->
<meta name="theme-color" content="#FF0000">
</head>
<body>
<input type="color" id="theme-color-picker" name="theme-color-picker" value="#FF0000">
<label for="theme-color">Theme color</label>
<script>
/* Le selecteur de couleur */
themeColorPicker = document.querySelector("#theme-color-picker");
/* La balise meta theme color */
metaThemeColor = document.querySelector('meta[name="theme-color"]');
/* Chaque changement de couleur */
themeColorPicker.addEventListener("input", function (event) {
/* changer la valeur de l'attribut content avec la couleur de l'évènement */
metaThemeColor.setAttribute('content', event.target.value);
});
</script>
</body>
</html>
Commentaires
Enregistrer un commentaire