Splync 1.13: Verbeterde zichtbaarheid in Dark Mode

Zoals je misschien weet, kun je de weergave van je iPhone aanpassen tussen Light Mode en Dark Mode. Weet je niet hoe je moet wisselen? Volg dan deze stappen: Open je iPhone-instellingen, ga naar beneden en tik op Beeldscherm en Helderheid. Je ziet twee voorbeeldafbeeldingen met de labels Light en Dark. Tik op degene die je wilt toepassen. Hiermee kun je je scherm aanpassen voor betere zichtbaarheid en comfort, afhankelijk van je omgeving. Light Mode bestaat al sinds de allereerste iPhone. Apple introduceerde Dark Mode officieel op de iPhone en iPad met iOS 13 / iPadOS 13 in september 2019. Deze functie verheugde veel iPhone-gebruikers met een gepersonaliseerde UI-weergave. Sommige mensen geven de voorkeur aan Light Mode, terwijl anderen fanatiek van Dark Mode houden. Je kunt ook voor Automatisch kiezen, wat tussen de twee modi wisselt op basis van het tijdstip van de dag.

Een app kan er perfect uitzien in Light Mode maar totaal anders in Dark Mode. Soms kan Dark Mode onbedoeld het oorspronkelijke ontwerp van de ontwikkelaar verstoren, wat invloed heeft op kleuren, contrast en esthetiek. Dit betekent dat ontwikkelaars hun interfaces zorgvuldig moeten ontwerpen en testen in beide modi om een consistente en prettige ervaring voor alle gebruikers te garanderen. Een mogelijke oplossing is het voorbereiden van aparte weergaven en afbeeldingsassets voor Light Mode en Dark Mode. Deze aanpak wordt echter snel omslachtig en moeilijk te onderhouden, vooral naarmate de app groeit en er nieuwe UI-componenten worden toegevoegd. Daarom vermijden de meeste ontwikkelaars deze methode en vertrouwen ze op meer schaalbare oplossingen die automatisch aan beide weergavemodi aanpassen.

Gelukkig introduceerde Apple systeemgedefinieerde kleuren die automatisch aanpassen aan zowel Light Mode als Dark Mode. Door deze ingebouwde kleuren te gebruiken, kunnen ontwikkelaars ervoor zorgen dat hun UI-elementen naadloos worden aangepast op basis van de weergave-instellingen van de gebruiker. Dit elimineert de noodzaak om handmatig aparte ontwerpen te beheren en helpt visuele consistentie in beide modi te behouden. Zo veranderen kleuren zoals label, systemBackground en secondarySystemBackground dynamisch afhankelijk van de huidige weergave, waardoor apps leesbaar en visueel in balans blijven in elke omgeving. Daarom verandert de standaard tekstopmaak van zwart naar wit als je van Light Mode naar Dark Mode overschakelt. Maar als een app zijn tekstkleur hardcodeert naar zwart, blijft de tekst zwart in Dark Mode, waardoor deze bijna onzichtbaar wordt tegen een donkere achtergrond. Om dit probleem te voorkomen, vertrouwen ontwikkelaars op systeemkleuren, zodat tekst en UI-elementen automatisch aanpassen aan de juiste kleur voor elke modus.

Splync was aanvankelijk niet erg vriendelijk voor Dark Mode-gebruikers. Toen een gebruiker meldde dat de categoriepictogrammen moeilijk te zien waren in Dark Mode, kon ik het niet meteen oplossen. Op dat moment was ik meer gefocust op het verbeteren van de kernfuncties van de app, dus gaf ik dit visuele probleem geen prioriteit. Met het nieuwe jaar 2026 keek ik er eindelijk beter naar. Wat ik ontdekte was simpel maar belangrijk: de pictogrammen waren puur zwart. Technisch gezien stonden ze vast op de kleur #000000. Dit betekent dat ze zwart bleven, ongeacht de modus die de telefoon gebruikte. Dus in Dark Mode zaten zwarte pictogrammen op een donkere achtergrond als camouflage. Bovendien had ik in mijn code ook een vaste witte kleur gebruikt om de pictogramachtergronden zachter te maken. Dit werkte prima in Light Mode, maar in Dark Mode zorgde het voor een ongemakkelijke contrast en voelde het niet natuurlijk aan.

Dit is wat ik heb veranderd. In plaats van kleuren te forceren, vertelt mijn herziene code de app om het systeem automatisch de pictogramkleur te laten bepalen; zwart in Light Mode en wit in Dark Mode. Daarnaast vertelt de code de app om voor elke categorie een eigen kleur als zachte achtergrondtint te gebruiken, een subtiele rand toe te voegen met dezelfde categoriekleur, en alles schoon en leesbaar te houden in beide modi. Kortom, ik stopte met het forceren van kleuren en liet de iPhone ze slim beheren. Dankzij deze verbetering passen categoriepictogrammen zich nu natuurlijk aan Light en Dark Mode aan, waardoor ze duidelijk zichtbaar en visueel consistent zijn in elke omgeving. Deze oplossing kostte niet veel tijd, maar ik besloot onmiddellijk een update uit te brengen zodat langverwachte problemen voor Dark Mode-gebruikers eindelijk zo snel mogelijk opgelost konden worden.

Er is geen enkele 'perfecte' esthetiek. Iedereen heeft een ander gevoel voor design. Zelfs dezelfde persoon kan zich anders voelen afhankelijk van de dag — of zelfs het tijdstip van de dag. Wat er 's ochtends geweldig uitziet, kan 's avonds afleidend aanvoelen. Daarom moeten ontwikkelaars zich richten op maatwerk, terwijl ze het balans houden met eenvoudige en intuïtieve bruikbaarheid. Goed ontwerp gaat niet over het opleggen van een stijl. Het gaat erom gebruikers te laten kiezen wat voor hen goed voelt — dat is wat ik geloof.