Tipps zum Dunkelmodus für Countdown-Timer

Zuletzt aktualisiert 30. Oktober 2026

Im Dunkelmodus ändern E-Mail-Apps die Farben deiner E-Mails. Manche lassen dein Design weitgehend unverändert, andere verdunkeln den Hintergrund und hellen den Text auf, und bei Gmail ändern sich die Farben in der Regel am stärksten. Dein Timer ist ein Bild, daher ändern sich seine Farben nie. Mit diesen Tipps sieht er in beiden Modi immer gut aus.

Warum ein Timer im Dunkelmodus manchmal falsch aussieht

Der E-Mail-Text rund um den Timer wird dunkel, aber der Timer behält die von dir gewählten Farben bei. Ein Timer mit weißem Hintergrund erscheint in einer dunklen E-Mail als strahlend weißes Feld.

Dieselbe E-Mail im Hell- und Dunkelmodus. Im Dunkelmodus wird die E-Mail dunkelgrau, aber der Timer behält seinen weißen Hintergrund und sticht als weißes Feld hervor.

Du kannst nicht beeinflussen, wie jede E-Mail-App deine E-Mails farblich anpasst, also gestalte den Timer so, dass er auf jedem Hintergrund wie beabsichtigt aussieht.

1. Gib dem Timer einen eigenen Hintergrund

Ein Timer mit einem eigenen einfarbigen Hintergrund, zum Beispiel in deiner Markenfarbe, sieht in beiden Modi gleich aus. Er wirkt so wie ein bewusstes Designelement und nicht wie eine Lücke in der E-Mail. Füge ein paar Auffüllung (Standard und höher) um die Zeitschaltuhr herum, sodass sie auf einer durchsichtigen Karte liegt.

Ein marineblauer „Ring Progress“-Timer mit Füllung, der in derselben E-Mail im hellen und dunklen Modus gezeigt wird und in beiden gleich aussieht

2. Sei vorsichtig mit transparenten Hintergründen

Die Kanten eines transparenten Timers werden an die Hintergrundfarbe du suchst dir was aus, selbst wenn Transparent . Wenn du „Weiß“ auswählst, entsteht ein blasser Rand um die Ziffern, sobald die E-Mail dunkel wird.

Falls der Timer transparent sein muss:

Such dir eine mittelgraue Hintergrundfarbe aus, zum Beispiel #808080. Der Rand ist dann sowohl auf hellem als auch auf dunklem Hintergrund viel weniger sichtbar.
Wende es nur auf einem einfarbigen Bereich an. Auf einem Foto oder einem Farbverlauf sehen die Kanten in beiden Modi unschön aus.

Ein transparenter blauer Timer auf dunklem Hintergrund mit weißer Hintergrundfarbe, der einen blassen Rand aufweist, sowie derselbe Timer mit mittelgrauer Hintergrundfarbe auf dunklem und auf weißem Hintergrund, wobei der Rand hier weitaus weniger sichtbar ist. Vergrößerte Ausschnitte zeigen die Randpixel

Mehr dazu unter Warum ist mein Countdown-Timer mit transparentem Hintergrund verschwommen?

3. Wähle Farben für den Hintergrund des Timers aus, nicht für den der E-Mail

Der starke Kontrast zwischen den Ziffern und dem Hintergrund der Uhr sorgt dafür, dass sie immer gut lesbar ist, egal was drumherum ist. Weiße oder helle Ziffern auf dunklem oder markenfarbigem Hintergrund funktionieren in beiden Modi. Dunkle Ziffern auf transparentem Hintergrund verschwinden im Dunkelmodus.

4. Füge eine Textumrandung hinzu

Textkontur aktivieren (Stufe „Power“ und höher) zeichnet einen Rahmen um die Ziffern und Beschriftungen. Ein heller Umriss um dunkle Ziffern oder ein dunkler Umriss um helle Ziffern sorgt dafür, dass sie auf jedem Hintergrund gut lesbar bleiben. Du findest diese Option ganz unten unter Text & Beschriftungen.

Ein transparenter Timer mit marineblauen Ziffern, der vor einem dunklen Hintergrund fast verschwindet, derselbe Timer mit weißem Umriss, der auf dunklem Hintergrund gut lesbar ist, und der umrandete Timer auf weißem Hintergrund

5. Denk größer

Größere Timer haben mehr Pixel pro Ziffer, sodass die Kanten in beiden Modi glatter aussehen. Erhöhe die Größe oder Schriftgröße der Beschriftung.

Für besonders scharfe Darstellungen auf hochauflösenden Bildschirmen wählst du eine Größe, die doppelt so breit ist wie nötig, und fügst ein width zum Bild-Tag in deinem Code. Zum Beispiel ein Timer in der Größe „X-Large“ (ca. 800 px breit) mit width="400" wird mit 400 px und doppelter Detailgenauigkeit angezeigt.

6. Probier mal einen Stil mit integrierten Formen aus

Blöcke, Ringe und Pillenformen verleihen den Ziffern ihre eigenen farbigen Umrisse, sodass sie nicht vom Hintergrund der E-Mail abhängen. Siehe Anpassungsoptionen für den Countdown-Timer für alle Stile.

Was nicht hilft

Code für den Dunkelmodus in deiner E-Mail-Vorlage, zum Beispiel prefers-color-scheme CSS – den Timer kann man nicht ändern. Die Farben sind Teil des Bildes, und viele E-Mail-Apps ignorieren diesen Code sowieso.

Vor dem Absenden testen

Schick dir selbst eine Testnachricht und öffne sie im Dunkelmodus in den Apps, die deine Abonnenten am häufigsten nutzen, zum Beispiel:

Gmail auf dem iPhone und auf Android
Gmail im Webbrowser
Apple Mail auf dem iPhone und dem Mac
Ausblick

Jede App geht mit dem Dunkelmodus etwas anders um, probier also am besten mehrere aus. Wenn nach dem Versenden der E-Mail etwas nicht richtig aussieht, pass den Timer in Sendtric an. Die Korrektur wird beim nächsten Öffnen der E-Mail angezeigt.

Wenn du mehr über E-Mail-Countdown-Timer erfahren möchtest, schau dir unseren Seite „E-Mail-Countdown-Timer“.