O que São Temas de Aplicativo – Visão Geral
Um tema de aplicativo é uma coleção de paletas de cores e atributos que criam uma sensação de persistência visual em todo o aplicativo, visualização ou atividade. Com temas de aplicativo, você pode definir a aparência e a sensação de seu aplicativo selecionando e configurando diferentes painéis, estilos, layouts, tipografia e widgets de tema pré-construídos. Ou você também pode criar um arquivo de tema personalizado.
Temas do App Builder
O App Builder adota uma abordagem de sistemas de design para a criação de interface do usuário e você pode baixar temas de aplicativos e aplicá-los no nível do aplicativo. Com uma única seleção de um tema, o tema é aplicado globalmente a todo o aplicativo imediatamente. Ter um tema global evita a necessidade de criar estilos locais que são difíceis de manter.
Alternando Temas do App Builder
Existem seis temas de aplicativos integrados baseados em Material, Fluent ou Bootstrap. Cada um tem uma versão escura e uma versão clara. Você pode testar selecionando o cartão de tema na caixa de ferramentas.
Alternando entre temas
Material vs. Fluent vs. Bootstrap
Quando alternamos de Material para Fluent, você verá que os componentes parecem diferentes. Por exemplo, o estilo de rótulo flutuante para o campo de entrada em Material muda para um rótulo fixo. E o switch também é visualmente diferente. Algumas das outras mudanças são mais sutis, mas estão lá.
Como Personalizar e Aplicar Temas de Aplicativo
Você pode criar um tema de aplicativo personalizado para corresponder à sua marca. Você faz isso criando um novo tema e escolhendo um dos temas base como ponto de partida. As paletas de cores são geradas automaticamente com base na cor primária e secundária que você escolher. Quanto à tipografia, por enquanto temos um conjunto de fontes integradas, mas planejamos adicionar mais controle criativo nas versões futuras. Após terminar a edição, salve o tema do aplicativo para aplicar as alterações.
Criar um novo tema
Alternando entre temas
Depois que um tema de aplicativo é selecionado, quando você aplica uma cor de preenchimento para um contêiner, o seletor de cores agora reflete a paleta do tema selecionado. Isso nos ajuda a permanecer fiel à abordagem de sistemas de design, onde os atributos da marca são decididos e mantidos no nível do aplicativo, e não decididos de forma ad-hoc dependendo de quem está criando a interface do usuário.
Alterar a aparência de um layout
No futuro, incluiremos uma maneira de adicionar cores personalizadas também, mas como um cenário de uso secundário. Por enquanto, se você ainda quiser personalizar ainda mais a aparência de um layout e ainda mais reformular o aplicativo usando uma cor personalizada, você sempre pode digitar o código de cor no campo de entrada ao lado. Os temas no nível do aplicativo que você criou no editor são persistidos de forma compatível com a plataforma ao gerar o aplicativo. Isso também torna muito simples alterar o tema no futuro.
Tenha em mente que com o App Builder você pode aproveitar os Flex layouts, fornecendo um conjunto de capacidades de posicionamento avançadas para criação mais fácil e rápida de layouts personalizados. Dessa forma, o aplicativo que você constrói se adaptará a qualquer tamanho de tela. Enquanto isso, em comparação com um layout absoluto, você obtém um design específico para apenas um tamanho de tela.
Recursos Adicionais
GitHub
