Tips voor de donkere modus bij countdown-timers

Laatst bijgewerkt 30 oktober 2026

In de donkere modus passen e-mailapps de kleuren van je e-mail aan. Sommige laten je ontwerp grotendeels ongewijzigd, andere maken de achtergrond donkerder en de tekst lichter, en Gmail verandert meestal het meest. Je timer is een afbeelding, dus de kleuren daarvan veranderen nooit. Met deze tips blijft hij er in beide modi goed uitzien.

Waarom een timer er in de donkere modus soms raar uit kan zien

De e-mail rondom de timer wordt donker, maar de timer behoudt de kleuren die je hebt gekozen. Een timer met een witte achtergrond wordt uiteindelijk een helderwit vakje in een donkere e-mail.

Dezelfde e-mail in de lichte en donkere modus. In de donkere modus wordt de e-mail donkergrijs, maar de timer behoudt zijn witte achtergrond en valt op als een wit vakje

Je hebt geen invloed op hoe elke e-mailapp je e-mail een andere kleur geeft, dus ontwerp de timer zo dat hij er op elke achtergrond goed uitziet.

1. Geef de timer een eigen achtergrond

Een timer met een eigen effen achtergrond, bijvoorbeeld in je merkkleur, ziet er in beide modi hetzelfde uit. Het komt dan over als een bewust gekozen ontwerpelement in plaats van een leeg plekje in de e-mail. Voeg wat Opvulling (Standard en hoger) rondom de timer, zodat die op een doorzichtig kaartje komt te liggen.

Een marineblauwe Ring Progress-timer met vulling, te zien in dezelfde e-mail in zowel de lichte als de donkere modus; hij ziet er in beide hetzelfde uit

2. Let goed op bij doorzichtige achtergronden

De randen van een doorzichtige timer zijn glad gemaakt tegen de achtergrondkleur je kiest maar, zelfs met Transparant . Als je wit kiest, krijg je een lichte rand rond de cijfers als de e-mail donker wordt.

Als de timer doorzichtig moet zijn:

Kies een middengrijze achtergrondkleur, zoals #808080. De rand is dan veel minder zichtbaar, zowel op een lichte als op een donkere achtergrond.
Gebruik het alleen op een effen, eenkleurig gedeelte. Op een foto of een kleurverloop zien de randen er in beide modi ruw uit.

Een doorzichtige blauwe timer op een donkere achtergrond met een witte achtergrondkleur, waarop een vage rand te zien is, en dezelfde timer met een middengrijze achtergrondkleur op zowel een donkere als een witte achtergrond, waarbij de rand veel minder zichtbaar is. In de uitvergrote inzetjes zie je de randpixels

Meer hierover in Waarom is mijn countdown-timer met doorzichtige achtergrond wazig?

3. Kies kleuren voor de achtergrond van de timer, niet voor die van de e-mail

Door het sterke contrast tussen de cijfers en de achtergrond van de timer blijft deze goed leesbaar, wat er ook omheen staat. Witte of lichte cijfers op een donkere of merk-kleurige achtergrond werken in beide modi. Donkere cijfers op een transparante achtergrond verdwijnen in de donkere modus.

4. Voeg een tekstomtrek toe

Tekstcontour inschakelen (Power en hoger) zet een randje rond de cijfers en labels. Een lichte rand rond donkere cijfers, of een donkere rand rond lichte cijfers, zorgt ervoor dat ze op elke achtergrond goed leesbaar blijven. Je vindt het onderaan Tekst en labels.

Een doorzichtige timer met marineblauwe cijfers die bijna onzichtbaar zijn tegen een donkere achtergrond, dezelfde timer met een witte omtrek die goed leesbaar is op een donkere achtergrond, en de timer met omtrek op een witte achtergrond

5. Denk grootser

Grotere timers hebben meer pixels per cijfer, waardoor de randen er in beide modi vloeiender uitzien. Verhoog de Maat of Lettergrootte van het label.

Voor extra scherpte op schermen met een hoge resolutie kies je een afmeting die twee keer zo breed is als je nodig hebt en voeg je een width aan de image-tag in je code. Bijvoorbeeld een X-Large-timer (ongeveer 800 px breed) met width="400" wordt weergegeven op 400 px met twee keer zoveel detail.

6. Probeer eens een stijl met ingebouwde vormen

Blokken, ringen en pilvormen geven de cijfers hun eigen gekleurde vorm, zodat ze niet afhankelijk zijn van de achtergrond van de e-mail. Zie aanpassingsopties voor de countdown-timer voor alle stijlen.

Wat helpt niet

Code voor de donkere modus in je e-mailsjabloon, zoals prefers-color-scheme Met CSS kun je de timer niet aanpassen. De kleuren zitten in de afbeelding, en veel e-mailapps negeren die code toch al.

Test het even voordat je het verstuurt

Stuur jezelf een testbericht en open het in de donkere modus in de apps die je abonnees het meest gebruiken, bijvoorbeeld:

Gmail op de iPhone en op Android
Gmail in een webbrowser
Apple Mail op de iPhone en Mac
Vooruitzichten

Elke app gaat net iets anders om met de donkere modus, dus probeer er meer dan één uit. Als er iets niet klopt nadat je de e-mail hebt verstuurd, pas dan de timer aan in Sendtric. De aanpassing wordt pas zichtbaar wanneer de e-mail de volgende keer wordt geopend.

Als je meer wilt weten over countdown-timers in e-mails, kijk dan eens op onze Pagina met countdown-timer voor e-mail.