Um tema é um conjunto de estilos ou atributos como cor, tipo e forma, que podem afetar a aparência do dispositivo móvel ou de tela grande de um usuário e no app.
Aprendizados
- Para oferecer aos usuários uma experiência mais personalizada e acessível, garanta que seu app adota preferências do sistema, incluindo temas, como claro ou escuro, dinâmico e e contraste.
- Crie um tema personalizado para usar como substituto se o dinâmico não estiver disponível.
- Considere as configurações de tipo ao usar vários temas.
- Sempre verifique o contraste do texto e da superfície para garantir a legibilidade.
Tipos de tema
Os temas são baseados no sistema ou em um app. Os temas de sistema podem afetar interface do dispositivo e fornecem os controles correspondentes nas configurações do dispositivo, enquanto um aplicativo afeta apenas o app em que é implementado.
O app precisa implementar qualquer tipo de tema para que ele seja mostrado, mas os temas de apps se aplicam somente dentro do app, e não em outros lugares do dispositivo. Também é possível substituir alguns configurações de tema do sistema com as configurações no app.
Temas do sistema
Os temas do sistema se aplicam a um dispositivo Android inteiro, inclusive os apps individuais dependendo das configurações do usuário. Os temas de sistema são claros e escuros, temas gerados pelo usuário e temas de fabricantes.
Temas claros e escuros
O tema claro, ou modo diurno, consiste em um modo de exibição claro com luminância e superfícies construídas a partir de altos valores tonais. Por outro lado, o tema escuro, ou Modo noturno, muda a interface para reduzir a luminância. As superfícies são construídas a partir do escuro cinzas ou valores tonais baixos.
O tema escuro tem vários benefícios: ajuda na legibilidade da tela em ambientes ensolarados ou baixos condições de luz, reduzindo o cansaço visual devido ao baixo brilho e conservando bateria. Além disso, ele é geralmente o recurso de app mais solicitado pelos usuários.
Considere os seguintes pontos ao implementar temas claros e escuros:
- Você pode personalizar um esquema de cores para melhorar a expressão. Se você usa o Material Theme Builder para criar um esquema, ele automaticamente cria uma camada escura esquema. Leia mais sobre como personalizar o Material Design e o sistema de cores para criar uma de marca.
- Os usuários podem definir um tema claro ou escuro nas configurações da tela no sistema da tela como sempre ativado, sempre desativado ou automático com base na hora do dia. Recomendamos refletindo as configurações preferidas do sistema do usuário, mas também é uma boa ideia criar controles no aplicativo para fornecer aos usuários modificações mais granulares.
- O conteúdo da Web em WebViews também pode usar o estilo claro, escuro ou padrão. Leitura 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 o tema escuro personalizado para ter mais controle.
- Se o usuário não tiver ativado outros temas ou configurações, você tem a opção de "bloqueio" seu app para o tema claro. No entanto, não recomendamos fazer isso, porque pode ir contra as necessidades de acessibilidade e personalização do usuário.
Temas gerados por usuários
Os temas gerados pelo usuário são compatíveis com as cores dinâmicas, que disponibilizado com o Material You a partir do Android 12. Quando ativada, a abordagem dinâmica usa cores personalizadas do plano de fundo do usuário para aplicar aos apps e interface do sistema. Essa paleta de cores é usada como o 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 necessidades do usuário preferências e necessidades de acessibilidade. Essas configurações podem devem ser levados em apps, portanto, certifique-se de utilizar valores de pixel escalonáveis para fontes.
Temas do fabricante
Os fabricantes de dispositivos podem fornecer recursos adicionais de definição de temas reservados que podem afetar a IU do sistema e as configurações de exibição.
Temas de apps
Referência
Os componentes do Material Design na biblioteca do Material Design oferecem um tema básico que usa um esquema de cores roxo e a fonte Roboto. Qualquer app que não defina um tema é revertido para os atributos de referência.
Personalizado (marca)
O uso de temas personalizados oferece uma maior variedade de expressão para a aparência do seu app e sentir, ou atuar como um substituto quando certos temas do sistema não estão disponíveis. Isso é útil se você está trabalhando com um sistema de design personalizado completo, guia de marca ou algumas de suas cores favoritas.
O app também pode ter vários esquemas personalizados, incluindo os esquemas completos que o usuário pode escolha entre elementos de marca, inspirados pelo conteúdo ou relacionados.
Conteúdo
Para dar mais foco a algum conteúdo, a interface pode usar cores dinâmicas para herdar a cor a partir desse conteúdo. A cor do conteúdo funciona bem com uma fonte principal, mas use-a com cuidado em visualizações com várias origens de conteúdo.
Um tema normalmente afeta um app geral, mas também pode ser aplicado seletivamente e com outros temas. Evite muitos temas e combinações mantendo com 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 aplicação de temas (cor, tipo, forma). Os Temas do Material Design também podem ser estendidos para realizar ao tema.
Marca
Se os sistemas de tema do Material Design não estiverem alinhados com a aparência que você quer é possível implementar um tema totalmente personalizado. Não deixe de testar propriedades para contraste e legibilidade.
Confira como implementar um sistema personalizado no Compose.
Atributos do tema
Os atributos do tema estão alinhados com estilos visuais comuns usados no design da interface para evocam uma gama de estéticas. No app, essas propriedades geralmente são vinculadas ao Material Design. sistemas de temas que permitam a personalização do criador de apps.
Cor
Usar cores para expressar estilo e comunicar significado. Como definir as cores do app podem ser essenciais para a personalização, definir o propósito semântico e, claro, definir a identidade da marca.
Dentro de um tema, um esquema de cores é o grupo de tons atribuídos a funções específicas mapeados a componentes. Saiba mais sobre cores no Android IU e o sistema de cores do Material 3 (links em inglês).
Tipo
A fonte do sistema do Android é Roboto (disponível sem custo financeiro para todos os aplicativos), mas você o tipo pode ser personalizado. Considere a legibilidade das fontes escolhidas para se alinhar e as funções delas. Leia sobre como aplicar o tipo.
Forma
Personalizar a forma dos cantos do contêiner além dos valores de referência padrão ajuda definir o personagem do seu app. Por exemplo, você pode usar cantos arredondados completos para dar uma sensação mais suave e divertida ou usar um corte angular para uma sensação mais séria. Confira os estilos e tokens de forma em Componentes do Material Design.
Ícones
Os ícones do Material Design estão disponíveis para uso no app em cinco estilos: preenchidos, com contorno, nítido, arredondado, dois tons. Use o mesmo estilo de ícone em toda aplicativo para manter uma aparência consistente e refinada.
Outros atributos de tema
Cor, tipografia e forma compõem os principais sistemas de temas do Material Design, os sistemas de design não se limitam aos conceitos dos quais 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 os temas. Talvez você também precise estender ou substituir os sistemas existentes para utilizar atributos personalizados além dos é fornecido. Por exemplo, adicione um sistema de gradientes ou espaçamento dimensões.
Aplicar um tema no app
Tema versus estilo e classes
Os temas e 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 View), embora seja possível definir um tema em vários elementos e até em todo o app. Um estilo é uma escolha estilística reutilizável, análoga a um estilo ou token em seu software de design. Por exemplo, "Corpo grande" é um estilo, enquanto "claro" e "escuro" são temas.
Implementar um tema no Compose
Um tema normalmente consiste em vários sistemas que agrupam visuais e elementos visuais comuns conceitos comportamentais, que você modela usando classes com valores de tema.
Consulte Material Design 3 no Compose para 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 com nomes semânticos que podem ser usados em todo o app. Os temas compartilham a mesma sintaxe de estilo.
Colors.xml
<resources>
<color name="home_yellow">#E8D655</color>
</resources>
WebViews (link em inglês)
O conteúdo da Web na WebView também pode usar o estilo claro, escuro ou padrão. Saiba como é possível usar o tema escuro em WebViews.
Personalizar um tema do Material Design
Você pode usar o plug-in do Figma para Material Theme Builder para personalizar um tema do Material Design. Criar um tema com ele permite que você arquivos de temas com esquemas de cores claras e escuras já gerados, permitindo que você para levar a personalização ainda mais longe, atualizando o arquivo de tema exportado com a sua valores exatos.
