Astuces pour le mode sombre avec les minuteurs de compte à rebours

Dernière mise à jour 30 octobre 2026

En mode sombre, les applications de messagerie modifient les couleurs de tes e-mails. Certaines laissent ton design pratiquement inchangé, d'autres assombrissent les arrière-plans et éclaircissent le texte, et c'est Gmail qui apporte généralement le plus de changements. Comme ton minuteur est une image, ses couleurs ne changent jamais. Ces astuces te permettront de t'assurer qu'il s'affiche correctement dans les deux modes.

Pourquoi un minuteur peut paraître bizarre en mode sombre

L'e-mail autour du minuteur s'assombrit, mais le minuteur conserve les couleurs que tu as choisies. Un minuteur avec un fond blanc apparaît alors comme une case d'un blanc éclatant dans un e-mail sombre.

Le même e-mail en mode clair et en mode sombre. En mode sombre, l'e-mail devient gris foncé, mais le compte à rebours conserve son fond blanc et ressort bien sous forme de case blanche.

Tu ne peux pas contrôler la façon dont chaque application de messagerie affiche tes e-mails, alors conçois le minuteur de manière à ce qu'il ait l'air bien pensé, quel que soit l'arrière-plan.

1. Donne au minuteur son propre arrière-plan

Un compte à rebours avec son propre arrière-plan uni, comme la couleur de ta marque, a le même rendu dans les deux modes. Ça passe pour un élément de design voulu, plutôt que pour un espace vide dans l'e-mail. Ajoute un peu de Remplissage (à partir de la version Standard) autour du minuteur pour qu'il repose sur une carte transparente.

Un minuteur « Ring Progress » bleu marine avec un contour, présenté dans le même e-mail en mode clair et en mode sombre, et qui a le même aspect dans les deux cas

2. Fais gaffe aux arrière-plans transparents

Les bords d'un minuteur transparent sont lissés contre le couleur d'arrière-plan tu choisis, même avec Transparent . Avec le fond blanc, tu as une petite bordure claire autour des chiffres quand l'e-mail devient foncé.

Si le minuteur doit être transparent :

Choisis une couleur de fond gris moyen, comme #808080. La frange est alors bien moins visible, que ce soit sur un fond clair ou foncé.
Utilise-le uniquement sur une zone unie, de couleur unique. Sur une photo ou un dégradé, les bords sont irréguliers, quel que soit le mode utilisé.

Un minuteur bleu transparent sur fond sombre avec un fond blanc, présentant une frange pâle, et le même minuteur avec un fond gris moyen sur fond sombre et sur fond blanc, où la frange est bien moins visible. Des agrandissements montrent les pixels du bord

Tu en sauras plus là-dessus dans Pourquoi mon minuteur de compte à rebours avec fond transparent est-il flou ?

3. Choisis les couleurs pour l'arrière-plan du minuteur, pas celles de l'e-mail

Le contraste marqué entre les chiffres et l'arrière-plan du minuteur garantit une bonne lisibilité, quel que soit l'environnement. Les chiffres blancs ou clairs sur un arrière-plan sombre ou aux couleurs de la marque fonctionnent dans les deux modes. Les chiffres sombres sur un arrière-plan transparent disparaissent en mode sombre.

4. Ajoute un contour au texte

Activer le contour du texte (Power et versions supérieures) ajoute un contour autour des chiffres et des libellés. Un contour clair autour des chiffres foncés, ou un contour foncé autour des chiffres clairs, permet de les lire facilement sur n'importe quel fond. Tu le trouveras en bas de Texte et Étiquettes.

Un minuteur transparent avec des chiffres bleu marine qui se fondent presque dans un fond sombre, le même minuteur avec un contour blanc qui se distingue bien sur un fond sombre, et le minuteur avec contour sur fond blanc

5. Vois plus grand

Les chronomètres plus grands ont plus de pixels par chiffre, ce qui rend les contours plus lisses dans les deux modes. Augmente la Taille ou Taille de la police des étiquettes.

Pour un rendu encore plus net sur les écrans haute résolution, choisis une taille deux fois plus large que ce dont tu as besoin et ajoute un width à la balise image dans ton code. Par exemple, un minuteur X-Large (environ 800 px de large) avec width="400" s'affiche à 400 px avec deux fois plus de détails.

6. Essaie un style avec des formes intégrées

Les blocs, les anneaux et les formes de pilules donnent aux chiffres leurs propres formes colorées, ce qui fait qu'ils ne dépendent pas de l'arrière-plan de l'e-mail. Voir options de personnalisation du minuteur de compte à rebours pour tous les styles.

Ce qui n'aide pas

Le code du mode sombre dans ton modèle d'e-mail, par exemple prefers-color-scheme Avec le CSS, on ne peut pas modifier le minuteur. Ses couleurs font partie de l'image, et de nombreuses applications de messagerie ignorent ce code de toute façon.

Vérifie avant d'envoyer

Envoie-toi un message test et ouvre-le en mode sombre dans les applications que tes abonnés utilisent le plus, par exemple :

Gmail sur iPhone et sur Android
Gmail dans un navigateur web
Apple Mail sur iPhone et Mac
Perspectives

Chaque appli gère le mode sombre un peu différemment, alors essaie-en plusieurs. Si quelque chose te semble bizarre après avoir envoyé l'e-mail, modifie la minuterie dans Sendtric. La correction s'appliquera la prochaine fois que l'e-mail sera ouvert.

Pour en savoir plus sur les minuteurs de compte à rebours par e-mail, consulte notre Page « Minuteur de compte à rebours par e-mail ».