Um tema é um conjunto de estilos ou atributos, como cor, tipo e forma, que pode afetar a aparência do dispositivo móvel ou de tela grande e da experiência no app de um usuário.
Takeaways
- Para oferecer aos usuários uma experiência mais personalizada e acessível, verifique se o app adote preferências do sistema, incluindo temas como claro ou escuro, dinâmico e contraste.
- Crie um tema personalizado para usar como substituto se o dinâmico não estiver disponível.
- Considere as configurações de tipografia ao usar vários temas.
- Sempre verifique o contraste do texto e da superfície para garantir a legibilidade.
Tipos de temas
Os temas são baseados no sistema ou no app. Os temas do sistema podem afetar toda a interface do dispositivo do usuário e fornecer controles correspondentes nas configurações do dispositivo, enquanto o tema do app afeta apenas o app em que é implementado.
Seu app precisa implementar qualquer tipo de tema para mostrá-lo, mas os temas se aplicam apenas ao app, e não em outros lugares do dispositivo. Você também pode substituir algumas configurações de tema do sistema por configurações no app.
Temas do sistema
Os temas do sistema se aplicam a todo o dispositivo Android, incluindo apps individuais, dependendo das configurações do usuário. Os temas do sistema incluem temas claros e escuros, temas gerados pelo usuário e temas do fabricante.
Temas claros e escuros
O tema claro, ou modo diurno, consiste em um modo de tela brilhante com mais luminância e superfícies criadas com valores tonais elevados. Por outro lado, o tema escuro, ou o modo noturno, muda a interface para reduzir a luminância. As superfícies são construídas a partir de cinzas escuros ou baixos valores tonais.
O tema escuro tem vários benefícios: auxilia na legibilidade da tela em condições de pouca luz ou ensolarado, reduz o cansaço visual devido ao baixo brilho e economiza bateria. Além disso, geralmente é o recurso de app mais pedido pelos usuários.
Considere o seguinte ao implementar temas claros e escuros:
- Você pode personalizar um esquema de cores para maior expressão. Se você estiver usando o Material Theme Builder para criar um esquema, ele criará automaticamente um esquema escuro. Leia mais sobre como personalizar o Material Design e o sistema de cores para criar um tema de marca.
- Os usuários podem definir um tema claro ou escuro nas configurações da tela no nível do sistema como sempre ativado, sempre desativado ou automático com base na hora do dia. Recomendamos refletir as configurações de sistema preferidas do usuário, mas também é uma boa ideia criar controles no app para fornecer modificações mais granulares aos usuários.
- O conteúdo da Web em WebViews também pode usar o estilo claro, escuro ou padrão. Saiba como há suporte ao tema escuro em WebViews.
- Se os usuários tiverem ativado esse recurso, o Android poderá forçar um tema escuro. Também é possível criar um tema escuro personalizado para ter mais controle.
- Se o usuário não tiver ativado outros temas ou configurações, você terá a opção de "bloquear" seu app para o tema claro. No entanto, isso não é recomendado, porque pode ir contra as necessidades de acessibilidade e personalização do usuário.
Temas gerados pelo usuário
Os temas gerados pelo usuário têm suporte às cores dinâmicas, que disponibilizamos no Material You a partir do Android 12. Quando ativada, a cor dinâmica deriva cores personalizadas do plano de fundo de um usuário para ser aplicada aos apps e à interface do sistema. Essa paleta é usada como ponto de partida para gerar esquemas de cores claras e escuras.
As configurações de fonte também podem ser atualizadas nas configurações do dispositivo para atender às preferências e às necessidades de acessibilidade do usuário. Essas configurações podem e precisam ser aplicadas a apps. Portanto, use valores de pixel escalonáveis para fontes.
Temas do fabricante
Os fabricantes de dispositivos podem oferecer outros recursos de temas reservados que podem afetar a interface e as configurações de tela do sistema.
Temas de apps
Referência
Os componentes do Material Design na biblioteca oferecem um tema de referência que usa um esquema de cores roxas e a fonte Roboto. Qualquer app que não definir atributos de tema será revertido para esses atributos de referência.
Personalizado (marca)
O uso de temas personalizados oferece uma maior variedade de expressão para a aparência do app ou para atuar como um substituto quando determinados temas do sistema não estiverem disponíveis. Isso é útil quando você está trabalhando com um sistema de design personalizado completo, um guia de marca pequeno ou algumas das suas cores favoritas.
Seu app também pode ter vários esquemas personalizados, sejam eles esquemas completos que o usuário possa escolher, conteúdo inspirado em conteúdo ou elementos de submarca.
Conteúdo
Para dar mais foco a algum conteúdo, a interface pode usar cores dinâmicas para herdar cores desse conteúdo. A cor do conteúdo funciona bem com uma origem de conteúdo principal, mas use com cautela em visualizações com várias origens.
Um tema normalmente afeta um app em geral, mas também pode ser aplicado seletivamente e junto com outros temas. Evite muitos temas e combinações mantendo uma hierarquia: uma fonte de tema principal (dinâmica ou personalizada) que se aplica à maior parte da interface.
Material
O Material Design oferece um tema de referência e sistemas de temas (cor, tipo, forma). Os Temas do Material Design também podem ser estendidos para realizar outros atributos do tema.
Marca
Se os sistemas de temas do Material Design não estiverem alinhados com a aparência que você quer no seu app, implemente um tema totalmente personalizado. Não deixe de testar o contraste e a legibilidade das propriedades personalizadas.
Aprenda a implementar um sistema personalizado no Compose.
Atributos do tema
Os atributos do tema são alinhados com estilos visuais comuns usados no design da interface para evocar uma variedade de estéticas. No app, essas propriedades geralmente são vinculadas a sistemas de temas do Material Design para permitir a personalização do app Maker.
Cor
Use a cor para expressar estilo e comunicar significados. Definir as cores do app pode ser crucial para a personalização, definir a finalidade semântica e, claro, a identidade da marca.
Dentro de um tema, um esquema de cores é o grupo de tons atribuídos a papéis específicos que são mapeados para componentes. Saiba mais sobre as cores na interface do Android e o sistema de cores do Material 3.
Tipo
A fonte do sistema do Android é Roboto, que está disponível sem custo financeiro para todos os apps, mas você pode personalizar o tipo. Considere a legibilidade das fontes escolhidas para se alinhar aos papéis delas. Leia sobre a aplicação do tipo.
Forma
Personalizar a forma dos cantos do contêiner além dos padrões do valor de referência ajuda a definir o caractere do app. Por exemplo, você pode usar cantos arredondados completos para trazer uma sensação mais suave e divertida ou usar um corte angular para uma sensação mais séria. Confira os tokens de forma e estilos dos componentes do Material Design.
Ícones
Os ícones do Material Design estão disponíveis para uso no seu app em cinco estilos: preenchido, contorno, nítido, arredondado, em dois tons. Use o mesmo estilo de ícone em todo o app para manter uma aparência consistente e refinada.
Outros atributos do tema
Embora cor, tipo e forma sejam os sistemas principais de temas do Material Design, os sistemas de design não estão limitados aos conceitos de que o Material Design depende. Você pode modificar sistemas existentes e introduzir sistemas totalmente novos, com novas classes e tipos, para tornar outros conceitos compatíveis com temas. Também pode ser necessário ampliar ou substituir os sistemas atuais para utilizar atributos personalizados além do fornecido. Por exemplo, adicione um sistema de gradientes ou dimensões de espaçamento.
Aplicar um tema no app
Tema x estilo e classes
Tanto os temas quanto os estilos podem ter vários atributos de design. Um estilo pode ser independente de um tema e se refere à aparência de um elemento individual (ou visualização), mas é possível definir um tema em vários elementos e até mesmo em todo o app. Um estilo é uma escolha estilística reutilizável, análoga a um estilo ou token no software de design. Por exemplo, Corpo grande é um estilo, enquanto claro e escuro são temas.
Implementar um tema no Compose
Um tema geralmente consiste em vários sistemas que agrupam conceitos visuais e comportamentais comuns, que você modela usando classes com valores de tema.
Consulte Material Design 3 no Compose para ver mais informações sobre como usar o Jetpack Compose para criar uma implementação do tema do Material Design 3.
Color.kt
val md_theme_light_primary = Color(0xFF476810)
val md_theme_light_onPrimary = Color(0xFFFFFFFF)
val md_theme_light_primaryContainer = Color(0xFFC7F089)
val md_theme_dark_primary = Color(0xFFACD370)
val md_theme_dark_onPrimary = Color(0xFF213600)
val md_theme_dark_primaryContainer = Color(0xFF324F00)
Implementar um tema nas visualizações
Os temas são uma coleção de recursos de nomes semânticos que podem ser usados em todo o app. Os temas compartilham a mesma sintaxe de estilo.
Comece a usar as visualizações.
Colors.xml
<resources>
<color name="home_yellow">#E8D655</color>
</resources>
WebViews
O conteúdo da Web na WebView também pode usar o estilo claro, escuro ou padrão. Confira como o tema escuro é compatível com WebViews.
Personalizar um tema do Material Design
Você pode usar o plug-in do Material Theme Builder para Figma para personalizar um tema do Material Design. A criação de um tema com ele oferece arquivos de temas implementáveis com esquemas de cores claras e escuras já gerados, permitindo que você aprimore a personalização atualizando o arquivo do tema exportado com seus valores exatos.
