Como transformar seu app antigo em dark theme based no iOS 13?

Fabrício Masiero
Nov 6 · 4 min read

English version available

Meu app suporta desde o iOS 9 até o mais recente lançado pela Apple(13) e gostaria que ele fosse dark theme e light theme. É possível?
Buscando por artigos da WWDC notei que a maneira que a Apple faz é usando

Colors.assets

LINDO! Criei um asset de cor no app e comecei a configurar. Mas… o que eu temia se tornou realidade. Suporte só para o. iOS 11+. Great Scott!


Documento de Cor

Tive que pensar em outras maneiras de fazer algo sustentável e que funcione.

Começando por criar uma extensão chamada Color.swift

My Color Extension

Utilize o Color Literal para uma visualização mais plena. Todas as cores do app devem estar aí, organizadas e padronizadas 👌. Diga adeus para colorWithHex() 😎 💁

Maravilha, mas como isso funcionaria como o dark mode? Simples, separe as cores que são dark themed e as que não são. Por exemplo, Plurall é o nome do meu app e roxo é sua cor, não necessariamente deve ser dark themed.

A seguir um exemplo de cores que contemplam os dois tipos de theme(podem ser escalados para mais que isso 👨‍💻)

Dark Themed Colors

Por que dessas cores?

Mantenho essas variáveis acima na mesma extensão e são cores mutáveis. O sistema entende perfeitamente quando deve usar cada uma. Mas onde eu cheguei nessas cores escuras? Por que delas?

Bom, eu não sou oficialmente um designer, não tenho essa skill mas me aventuro mesmo assim ☺️.
Mas então, e as cores escuras? Eu usei a técnica de Inverted Color(aqui um site que vai te ajudar a inverter a cor https://pinetools.com/invert-color), ou seja, consigo manter a mesma usabilidade de contraste e visualização que meu app já tinha antes do Dark Mode, usando cores que ainda conversam entre si.
E por que a Apple usa o full-black nos seus apps nativos? Os iPhones high-end(iPhone X, iPhone XS e iPhone 11 Pro) contém tela de OLED e o preto é fiel, essas telas apagam o pixel e com isso, o aparelho gasta menos bateria.

É nessa linha que desenvolvi essa feature para o app que pode funcionar a partir do iOS 9. Como visto no código, ele ainda não funciona nos iOS passados, essa é uma decisão que ainda temos que conversar internamente, porém, é fácil implementar essa mudança.

Acho que chegou a hora de mostrar como o app está, certo?

A seguir, alguns exemplos do dark mode.

Só existe um lado "ruim" nessa história toda, setar as cores manualmente 😒. Se você usa XIB ou Storyboard(como eu) será mais trabalhoso, mas nada muito dolorido. Se você é daqueles que faz todo o layout via código, nada muda para você, campeão! De qualquer maneira você encontrará muito disso por ai!

Setting colors programmatically

A partir disso, vou sentar com a equipe de design e verificar quais mudanças podemos fazer para uma melhor visualização, consigo notar algumas falhas de visualização, não respeitando o contraste 21:1 ou até 4.5:1.

Além dessa mudança visual, o que mudou?
Bom, revisitei todo o código(é um app antigo, muita coisa legada) e coloquei na minha cabeça: — Não refatore coisas complexas, arrume force unwraps e outras coisas bobas de fácil manutenção.
Segui assim, ajustei todas as cores do app(que estavam uma bagunça 😳), ajustei pequenos erros de XIBs e Storyboards, removi inúmeras classes que não eram relevantes e volto a dizer, as cores do app estão completamente organizadas e visuais.

Espero ter ajudado a todos que buscam por essa mudança. Caso queiram esticar a discussão, me chamem no Twitter: https://twitter.com/fabri_masiero

Happy Coding :)

Fabrício Masiero

Written by

iOS Dev at Plurall - São Paulo, Brazil

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade