Modifier les couleurs de Chrome (onglets et arrière-plan)

J'ai toujours aimé personnaliser mon environnement numérique, et l'idée de modifier les couleurs de Google Chrome fait partie intégrante de cette démarche. Après avoir galéré à trouver comment les modifier, j'ai décidé de partager mes découvertes avec vous dans cet article, à l'issue duquel l'action consistant à modifier les couleurs de Chrome n'aura plus de secret pour vous !

Comment procéder ?

Pour modifier les couleurs du navigateur Chrome, il est indispensable de faire ça depuis un nouvel onglet.
Ensuite il faut chercher le petit cartouche EN BAS A DROITE du nouvel onglet, avec le petit crayon et la mention "Personnaliser Chrome".
Dans le menu, choisir l'option "Couleur et thème".
On tombe alors sur une fenêtre avec demi-cercles de couleurs, il ne nous reste plus qu'à faire notre marché là-dedans.

A noter : il est possible de choisir ses propres couleurs (web) en utilisant le premier cercle (avec l'icône pipette). La pipette est très puissante, puisqu'elle nous permet de nous déplacer en-dehors de l'écran de Chrome (si celui-ci est fenêtré) pour aller explorer n'importe quelle zone de l'écran de notre ordi.

Une image de fond ?

Pour les utilisateurs qui recherchent une expérience plus immersive, il est possible de créer un thème personnalisé en utilisant une image de fond. Pour cela, cliquez sur le bouton "Ajouter un thème" et sélectionnez l'image de votre choix.

Complément : Améliorer la visibilité du curseur de défilement

Si, malgré la personnalisation des couleurs de Chrome, vous trouvez toujours la "cabine d'ascenseur" (le curseur de la barre de défilement) trop difficile à repérer, sachez qu'il existe une solution plus radicale mais redoutable d'efficacité.

Le problème : un manque de contraste natif

Par défaut, Chrome propose des barres de défilement très discrètes. Sur certaines pages, ce manque de contraste oblige souvent à "tâtonner" à la souris pour attraper le curseur, ce qui peut être très frustrant.

La solution : l'injection de style via Stylus

Pour forcer un contraste optimal sans dénaturer l'esthétique de vos sites préférés, vous pouvez utiliser l'extension pour Chrome Stylus. Elle permet d'appliquer votre propre réglage visuel par-dessus celui du navigateur.

La méthode en 3 étapes :

1. Installez l'extension Stylus depuis le Chrome Web Store.
2. Créez un "Nouveau style" et nommez-le par exemple "Contraste Ascenseur".
3. Copiez et collez le code suivant, puis enregistrez.

CSS

/* Amélioration du contraste de la barre de défilement */
::-webkit-scrollbar {
    width: 14px !important;
    background-color: #E0E0E0 !important; /* Couleur du rail */
}

::-webkit-scrollbar-thumb {
    background-color: #5C5C5C !important; /* Couleur de la cabine (Gris soutenu) */
    border: 3px solid #E0E0E0 !important; /* Espacement pour la visibilité */
    border-radius: 8px !important;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #444444 !important; /* Feedback au survol */
}

Pourquoi ce choix de gris ?

J'ai opté pour le code couleur #5C5C5C. Contrairement au noir pur, ce gris foncé reste parfaitement visible au premier coup d'œil tout en restant élégant, même lorsque la "cabine" est très allongée ou que la page comporte plusieurs volets de navigation.

Voilà. N'hésitez pas à expérimenter différentes couleurs et thèmes pour trouver celui qui vous correspond le mieux. Et si vous avez des questions ou des suggestions, n'hésitez pas à laisser un commentaire ci-dessous.

Dans la même série : Comment accéder facilement à une date précise dans Google Agenda ?

---

Le Petit Abécédaire...