Temas

Sistema de temas

Visão geral

O sistema de temas oferece uma solução completa e moderna para personalização visual, baseada nos padrões do Material Design 3. Através de ferramentas intuitivas e configurações flexíveis, permite criar experiências visuais consistentes, acessíveis e alinhadas com a identidade de cada organização.

O sistema de temas adota uma abordagem baseada em tokens de design e papéis de cores (color roles), onde as cores não estão diretamente vinculadas a elementos específicos da interface, mas sim a funções semânticas que são aplicadas consistentemente em todo o sistema.

Arquitetura do sistema de temas

Material Design 3 - Fundamentos

O tema segue as diretrizes do Material Design 3, que define:

  • Paletas tonais: Conjuntos de cores derivadas de uma cor base, com variações de tonalidade de 0 a 100.
  • Papéis de cores: Funções semânticas como “primary”, “secondary”, “surface”, etc.
  • Esquemas de cores: Combinações específicas de cores para temas claros e escuros.
  • Níveis de contraste: Garantia de acessibilidade através de contraste adequado.

Componentes

Paletas de cores

Possui três paletas principais:

  • Paleta primária: Derivada da cor de origem, usada para elementos principais.
  • Paleta secundária: Gerada através de estratégias de cores ou definida manualmente.
  • Paleta neutra: Utilizada para superfícies, fundos e elementos neutros.

Esquemas de cores

Cada tema possui dois esquemas principais com variações de contraste:

  • Light (Claro): Esquema para interfaces claras com variações de alto e baixo contraste.
  • Dark (Escuro): Esquema para interfaces escuras com variações de alto e baixo contraste.

Cada esquema oferece três níveis de contraste (padrão, baixo e alto) para atender diferentes necessidades de acessibilidade e preferências visuais.

Temas pré-definidos

O sistema oferece 11 temas pré-configurados:

  1. Amarelo - Tons quentes e energéticos
  2. Azul - Clássico e confiável
  3. Azul claro - Moderno e suave
  4. Cinza - Neutro e profissional
  5. Cinza escuro - Elegante e sofisticado
  6. Laranja claro - Vibrante e amigável
  7. Rosa - Criativo e expressivo
  8. Roxo - Inovador e diferenciado
  9. Verde - Natural e equilibrado
  10. Verde escuro - Sóbrio e sustentável
  11. Vermelho - Dinâmico e impactante

Cada tema pré-definido foi cuidadosamente desenvolvido para garantir acessibilidade e harmonia visual em todos os contextos de uso.

Configuração e administração

Acesso aos temas

Os temas são acessados através do módulo “Administração do sistema > Aparência e personalização > Temas”. Este processo permite:

  • Visualizar todos os temas disponíveis;
  • Criar novos temas personalizados;
  • Editar temas existentes;
  • Definir o tema padrão do sistema;
  • Pré-visualizar temas antes da aplicação.

Configuração de permissões

As permissões de acesso aos temas são configuradas através do módulo “Administração do sistema > Aparência e personalização > Ambiente”, na seção “Configurações do ambiente”. Nesta mesma tela, o administrador pode:

  • Definir o tema padrão do sistema;
  • Configurar permissões de alteração pelos usuários;
  • Gerenciar outras configurações de ambiente e aparência.

Níveis de controle de acesso

O sistema oferece três níveis de controle para alteração de temas pelos usuários:

  1. Ninguém: Nenhum usuário pode alterar temas (apenas administradores).
  2. Todos: Qualquer usuário pode modificar seu tema pessoal.
  3. Apenas autorizados: Somente usuários com escopo específico podem alterar temas.

Esta configuração determina se os usuários terão acesso às opções de personalização de tema em seus perfis individuais.

Definindo o tema padrão

Para definir um tema como padrão do sistema:

  1. Acesse “Administração do sistema > Aparência e personalização > Temas”;
  2. Selecione o tema desejado na grade;
  3. Clique em “Definir como padrão”;
  4. Confirme a operação.

O tema padrão será aplicado automaticamente para novos usuários e aqueles que não possuem tema personalizado.

Criação de temas personalizados

Ferramentas básicas recomendadas

Para criar um tema personalizado, recomenda-se utilizar as ferramentas básicas disponíveis na seção “Configuração do tema”:

Cor de origem

  • Definição: A cor principal que serve como base para todo o tema.
  • Uso: Normalmente a cor institucional da empresa ou marca.
  • Formato: RGB hexadecimal (ex: #1976D2).
  • Impacto: Influencia diretamente as paletas primária, secundária e neutra.

Regra de geração

Determina como as cores secundárias e neutras são derivadas:

  • Tonal: Gera cores com intensidade média e contêineres com menos saturação.
  • Fidelidade: Mantém maior fidelidade à cor de origem nos contêineres.

Estratégias para cor secundária

Estratégias baseadas em saturação:

  • 1/2 Saturação: Reduz o croma pela metade (máximo 32 pontos de diferença).
  • Saturação 16: Define croma fixo em 16 pontos (baixa saturação).

Estratégias baseadas em teoria das cores:

  • Análoga fria: Cores próximas no círculo cromático (lado frio).
  • Análoga quente: Cores próximas no círculo cromático (lado quente).
  • Análoga mais fria/quente: Versões mais extremas das análogas.
  • Análoga fria tonal: Variação tonal das cores análogas frias.
  • Complementar: Cor oposta no círculo cromático.

Estratégias para cor neutra

  • 1/8 Saturação: Mantém 1/8 do croma original (cinza com matiz perceptível).
  • Monocromática: Menor quantidade possível de matiz (quase cinza).
  • Escala de cinza: Totalmente neutro, sem matiz.

Processo de criação

  1. Definir cor de origem

    Exemplo: #2196F3 (azul corporativo)

  2. Escolher regra de geração

    Recomendado: Tonal (para maioria dos casos)

  3. Configurar estratégia secundária

    Sugestão: 1/2 Saturação (harmoniosa e profissional)

  4. Definir estratégia neutra

    Padrão: 1/8 Saturação (mantém identidade visual sutil)

  5. Pré-visualizar o tema

    • Use o botão “Ativar pré-visualização”;
    • Navegue pelo sistema para avaliar o resultado;
    • Ajuste conforme necessário.

  6. Salvar o tema

    • Clique em “Gravar”;
    • Defina nome e código identificador;
    • Confirme a operação.

Personalização avançada

Cores base manuais

Para controle total, é possível definir manualmente as três cores base:

  • Primária: Cor principal do sistema.
  • Secundária: Cor de apoio e elementos secundários.
  • Neutra: Base para superfícies e elementos neutros.

Customização individual de cores

⚠️ Atenção: A customização individual deve ser usada apenas como último recurso e por profissionais com conhecimento em teoria das cores.

O sistema permite editar individualmente cada cor dos esquemas claro e escuro, mas isso pode comprometer:

  • Critérios de acessibilidade;
  • Contraste mínimo entre texto e fundo;
  • Harmonia visual do conjunto.

Níveis de contraste

O sistema oferece três níveis de contraste para cada esquema:

  • Padrão: Contraste equilibrado para uso geral.
  • Baixo: Contraste reduzido para interfaces suaves.
  • Alto: Contraste elevado para máxima acessibilidade.

Tokens de design e papéis de cores

Conceito fundamental

As cores do tema não são aplicadas diretamente aos elementos da interface. Em vez disso, elas são mapeadas para tokens de design que representam papéis semânticos:

Cores principais

  • primary: Cor principal para elementos de destaque.
  • onPrimary: Texto sobre a cor primária.
  • primaryContainer: Fundo para elementos primários.
  • onPrimaryContainer: Texto sobre contêineres primários.

Cores secundárias

  • secondary: Cor secundária para elementos de apoio.
  • onSecondary: Texto sobre a cor secundária.
  • secondaryContainer: Fundo para elementos secundários.
  • onSecondaryContainer: Texto sobre contêineres secundários.

Cores de superfície

  • surface: Cor base das superfícies.
  • onSurface: Texto sobre superfícies.
  • surfaceVariant: Variação de superfície.
  • onSurfaceVariant: Texto sobre variações de superfície.

Cores de sistema

  • error: Cor para estados de erro.
  • onError: Texto sobre elementos de erro.
  • outline: Cor para contornos e bordas.
  • shadow: Cor para sombras.

Garantia de contraste

O sistema automaticamente calcula e garante que:

  • Texto sobre fundos: Atende critérios WCAG AA (4.5:1) ou AAA (7:1).
  • Elementos interativos: Possuem contraste suficiente para identificação.
  • Estados de foco: São claramente distinguíveis.
  • Hierarquia visual: É mantida através do contraste adequado.

Uso pelo usuário final

Os usuários podem personalizar sua experiência através do menu de perfil:

  1. Tema: Selecionar entre temas disponíveis (se permitido).
  2. Esquema de cores: Alternar entre claro e escuro.
  3. Densidade: Ajustar espaçamento da interface.
  4. Contraste: Modificar nível de contraste.

Configurações individuais

Cada usuário pode definir:

  • Tema preferido: Entre os disponíveis no sistema.
  • Modo claro/escuro: Baseado em preferência pessoal.
  • Nível de contraste: Adequado às suas necessidades de acessibilidade.
  • Densidade da interface: Compacta, padrão ou confortável.

Pré-visualização de temas

O sistema oferece funcionalidade de pré-visualização que permite:

  • Testar temas antes da aplicação definitiva;
  • Visualizar mudanças em tempo real;
  • Avaliar impacto em diferentes componentes;
  • Retornar ao tema anterior se necessário.

Última atualização em 18 Sep 2025