Implementando Dark Mode no iOS 13
Welcome to the Dark Mode
Introdução
Depois de muito tempo de espera a Apple finalmente anunciou o Dark Mode de forma nativa no iOS 13. Hoje quero dar uma visão geral sobre essa nova funcionalidade e de que forma podemos implementa-lo.
Premissas
Bom, antes de mais nada precisamos verificar alguns itens antes de implementar o modo noturno no seu aplicativo.
- Será necessário a versão do XCode 11 ou superior para realizar a compilação do seus aplicativo, do contrário você não terá suporte ao modo noturno.
- Somente aparelhos com iOS 13 tem a funcionalidade de modo noturno, versões anteriores irão voltar para o padrão.
Vale lembrar também que mesmo que seu aplicativo tenha sido compilado pela versão 11 ou superior do XCode, é fundamental se certificar de que o iPhone que irá instalar o aplicativo esteja também com a versão do iOS que de suporte ao modo noturno. A partir da versão do 13 do iOS, já existe suporte ao mesmo e você pode ativa-lo no menu de configurações.
Como desabilitar
Caso seu aplicativo ainda não esteja pronto com a funcionalidade de modo noturno, e você queira usufruir de todas as novidades do Xcode 11, não se preocupe porque é possível desabilita-lo.
Vamos botar a mão na massa
Opt-Out — UIUserInterfaceStyle
Existe um enumerador chamado UIUserInterfaceStyle , que determina o estilo de "interface" do seu aplicativo. Desta forma podemos adicionar uma nova chave no "info.plist", que irá desabilitar o modo noturno e deixando como padrão o modo "claro".
Basta adicionar uma nova chave e alterar o UIUserInterfaceStyle para light no seu info.plist que irá ignorar o modo noturno.
Opt-Out — OverrideUserInterfaceStyle
Uma outra forma na qual podemos desabilitar o modo noturno, seria uma abordagem de tratamento isolado para cada “view” e “ViewController”. Para isto precisamos sobrescrever a interface padrão, a OverrideUserInterfaceStyle.
ViewController:
View:
Static and Dynamic Colors
Agora vamos falar um pouco sobre cores. Até a versão do iOS 11, havia uma paleta simples de cores. Essas cores são chamadas de "Static Colors" , pois não mudam e podem ser acessadas com: UIColor.red, UIColor.white etc.
A partir da versão do iOS 12, foi introduzida uma nova gama, chamada de “System Colors”. Sua principal diferença é a habilidade de se adaptar em cenários com mudanças de acessibilidade, como aumento do contraste ou transparência.
iOS offers a range of system colors that automatically adapt to vibrancy and changes in accessibility settings like Increase Contrast and Reduce Transparency.
Dynamic Colors
Além das cores se adaptarem a mudanças de acessibilidade, no iOS 13 elas também se adaptam entre o modo noturno e o normal.
Semantic Color
Outra novidade no Xcode 11 foi o conceito de cores semânticas “Semantic Colors”. Essa paleta de cores, além de ser dinâmica, possuí um sentido semântico de tag, como “Headline” ou “Body”. Por exemplo, no Xcode 10 existem algumas cores para que podíamos usar para labels como : “lightText” e “darkText”, porem as mesmas são estáticas e é desencorajado continuar o uso delas, podemos substituir por UIColor.label, UIColor.placeholderText etc.
Implementando o Dark Mode
Para adicionar uma cor basta ir à pasta de "Assets" e incluir um novo “Color Set”. Podemos adicionar a cor para o modo noturno clicando em “Appearences” e definindo o estilo como "Dark".
Criando sua própria cor semântica
Para dar suporte as versões antigas do iOS, podemos criar uma extensão para retornar a cor com valor semântico ou um valor padrão para as versões anteriores ao iOS 13.
Adicionamos o #avaliable para iOS 13 para garantir a retrocompatibilidade com versões mais antigas.
Como vimos sobre cores semânticas, elas mudam automaticamente de acordo com o modo, mas podemos desejar definir qual cor deve ser retornada.
Conclusão
Com a introdução do Dark Mode, a Apple mudou a maneira de trabalhar com cores no iOS, além de passar a reforçar vários pontos que já havia falado desde a versão do iOS 12 sobre questões de acessibilidade. No entanto, entender o funcionamento das cores e como podemos aplicar o Dark Mode em nossos aplicativos são pontos que devemos dar uma atenção, pois se aplicado de forma errada, o modo noturno irá comprometer nosso layout e os usuários terão uma experiência frustrante em nossos aplicativos e não é isso que queremos, não é?!
Espero que tenham gostado! Dúvidas, críticas e sugestões por favor deixem nos comentários.
