Modo Escuro no iOS 13: Hands-On
Em 3 de Junho, no McEnery Convention Center, Craig Federighi (vice-presidente sênior da Apple e responsável pelo iOS), sob aplausos de uma multidão de jornalistas e desenvolvedores, anunciou: iOS now lives in the dark!
O modo escuro no iOS vinha sendo ansiosamente aguardado pelos usuários do iPhone, considerando principalmente a aparência imponente deste modo em aparelhos como os iPhones X, Xs e Xs Max, modelos que possuem os “pretos verdadeiros” em suas telas.
Mudanças como essa tendem a trazer um enorme impacto de experiência para os usuários da plataforma. Todos os apps desenvolvidos pela Apple contam com suporte ao modo escuro no iOS 13, mas a App Store considera que os third-party apps distribuídos por ela hoje podem escolher suportar ou não este modo.
No entanto, você quer distribuir seu app agradando tanto quem escolheu o lado luminoso da força quanto quem abraçou o lado escuro. A seguir, no blog da Iteris, vamos ver como isso é simples de ser implementado em apps já existentes.
Cores semânticas
A partir do iOS 11, a Apple abriu o caminho para a utilização de cores semânticas com o suporte à criação de cores como assets. Com isso, é possível criar suas cores dando nomes semânticos a elas. Essa é a base para a implementação do modo escuro nos apps com peso quase ZERO para o desenvolvedor.
Cores dinâmicas
O SDK do iOS 13 traz um aprimoramento das cores semânticas para o modo escuro, chamado de cores dinâmicas. O sistema já traz uma gama bem grande de cores para serem utilizadas, assim como cores com nomes semânticos para diferentes contextos como label, placeholder, separador, background, entre outras. Ao utilizar as cores dinâmicas que o sistema dispõe, seu app já ganha gratuitamente a adaptação automática destas cores de acordo com o modo escolhido pelo usuário.
Cores dinâmicas próprias
É possível também definir as suas próprias cores dinâmicas. Para isso, nos seus assets de cores, há um modificador chamado Appearances. Basta selecionar nele a variação “Any, Dark” e definir como seu ColorAsset deve se comportar nos modos “qualquer” e no modo escuro. É possível também definir cores para as variações “Any, Light, Dark” para atribuir cores para os modos claro, escuro e “qualquer”, que no caso seria utilizado nas versões de iOS inferiores à 13.
Imagens dinâmicas
Tem uma imagem que fica perfeita no modo claro mas não no modo escuro? É possível também utilizar imagens dinâmicas para isso, já que o modificador Appearances também está disponível para imagens.
Passo a passo
Vamos abordar agora o passo a passo a ser seguido para fazer o seu app suportar o modo escuro.
Para executar este tutorial, é necessário utilizar o Xcode 11, preferencialmente no MacOS Catalina. Os betas públicos já estão disponíveis em: https://beta.apple.com/.
Passo 1
Execute seu app no simulador e utilize a nova funcionalidade “Environment Overrides” para mudar a aparência do iOS para o modo escuro. Navegue pelo app e veja como ele se comporta.
Passo 2
Hora de trazer um pouco de escuridão para o app. Vamos trocar o background white de todas as views pela cor “System Background”.
Você utiliza a interface builder e não quer ter que rodar o app novamente pra visualizar as mudanças? Sem problemas, é possível mudar o estilo de apresentação para o modo dark.
Passo 3
Muitas cores podem não possuir um bom contraste com os pretos do modo escuro. Caso possua uma paleta cores, utilize-a preferencialmente para criar suas próprias cores dinâmicas e adaptá-las ao seu tema nos modos claro e escuro. Caso não possua uma paleta, você pode aproveitar as cores dinâmicas já existentes no SDK e usar sua liberdade criativa pra criar suas próprias cores dinâmicas também. \o/
Importante:
O modo escuro foi concebido para viver na escuridão, aproveitando os pretos verdadeiros nas telas Super Retina dos novos iPhones, que trazem um conforto visual significativo para o usuário. Então lembre-se sempre que o modo escuro deve explorar sempre que possível a cor preta nos planos de fundo e áreas majoritárias de seu app.
Link para o GitHub de exemplo: https://github.com/IterisMarlon/demo-ios-dark-mode.
Entre em contato através do nosso site e saiba como os especialistas da Iteris podem ajudar a manter seu app em dia com as principais novidades e melhorias de experiência disponíveis no mercado.
