Suporte de variável de cor para ícones

Saiba como usar variáveis de cor para mudar o tema nas telas do mapa móvel

Os ícones móveis têm uma seção Definir aparência usada para definir a aparência dos ícones. Use a opção de estilo FontColorVariable para usar uma variável de cor uma cor. Usando este estilo, você pode definir qualquer variável de cor da tabela Propriedades do tema de UX [sys_ux_theme_property]. Para obter uma lista de variáveis disponíveis, consulte o guia de design de cores abaixo. Para obter detalhes sobre como criar telas de mapa, consulte Configurar uma seção de IU de ícone. Para obter detalhes sobre como criar ícones em dispositivos móveis, consulte Ícones para dispositivos móveis.

Guia de cores do ícone do Mobile

As variáveis de cor são divididas em Use a diretriz de design para identificar a variável de cor correta para o seu caso de uso.

Paleta de cores de alerta

As cores da paleta de cores de alerta realçam status, estados e tarefas importantes. Use cores de alerta para comunicar um significado específico, em vez de para decoração ou organização.

Paleta de cores agrupada

As cores da paleta de cores agrupadas seguem as convenções de cores em uma linha de setor. Use essas cores para mostrar que o item colorido está associado a um setor ou linha de negócios específico. O significado de cada cor depende do contexto, mas deve permanecer consistente na sua aplicação.

Cada cor de suporte tem três opções, incluindo uma opção avaliável. Considere usar a opção de cor acessível para ícones que não contenham texto para melhorar a navegabilidade dos usuários.

Tabela 1. Paleta de cores de alerta

Nome da cor	Exemplo	Variáveis de cor
Crítico		Variáveis móveis Opção 1: alerta--crítico-2 Opção 2: alerta--critical-3 Opção 3 (acessível): alerta--crítico-4 Variável da web Opção 1:--now-color_alert--critical-2 Opção 2:--now-color_alert--critical-3 Opção 3 (acessível):--now-color_alert--critical-4
Alta		Variáveis móveis Opção 1: alerta--high-2 Opção 2: alerta--high-3 Opção 3 (acessível): alerta--high-4 Variável da web Opção 1:--now-color_alert--high-2 Opção 2:--now-color_alert--high-3 Opção 3 (acessível):--now-color_alert--high-4
Aviso		Variáveis móveis Opção 1: alerta--warning-2 Opção 2: alerta--warning-3 Opção 3 (acessível): alerta--warning-4 Variável da web Opção 1:--now-color_alert--warning-2 Opção 2:--now-color_alert--warning-3 Opção 3 (acessível):--now-color_alert--warning-4
Moderado		Variáveis móveis Opção 1: alerta--moderate-2 Opção 2: alerta--moderate-3 Opção 3 (acessível): alert--moderate-4 Variável da web Opção 1:--now-color_alert--moderate-2 Opção 2:--now-color_alert--moderate-3 Opção 3 (acessível):--now-color_alert--moderate-4
Informações		Variáveis móveis Opção 1: alerta--info-2 Opção 2: alerta--info-3 Opção 3 (acessível): alerta--info-4 Variável da web Opção: 1--now-color_alert--info-2 Opção 2:--now-color_alert--info-3 Opção 3 (acessível):--now-color_alert--info-4
Positivo		Variáveis móveis Opção 1: alerta--positive-2 Opção 2: alerta--positive-3 Opção 3 (acessível): alerta--positive-4 Variável da web Opção 1:--now-color_alert--positive-2 Opção 2:--now-color_alert--positive-3 Opção 3 (acessível):--now-color_alert--positive-4
Baixo(a)		Variáveis móveis Opção 1: alerta--low-2 Opção 2: alerta--low-3 Opção 3 (acessível): alert--low-4 Variável da web Opção 1:--now-color_alert--low-2 Opção 2:--now-color_alert--low-3 Opção 3 (acessível):--now-color_alert--low-4

Tabela 2. Paleta de cores agrupada

Nome da cor	Exemplo	Opções de cor
Azul		Variável da web Opção 1:--now-color_grouped--blue-2 Opção 2:--now-color_grouped--blue-3 Opção 3 (acessível):--now-color_grouped--blue-4
Marrom		Variável da web Opção 1:--now-color_grouped--brown-2 Opção 2:--now-color_grouped--brown-3 Opção 3 (acessível):--now-color_grouped--brown-4
Cinza		Variável da web Opção 1:--now-color_grouped--gray-2 Opção 2:--now-color_grouped--gray-3 Opção 3 (acessível):--now-color_grouped--gray-4
Verde		Variável da web Opção 1:--now-color_grouped--Green-2 Opção 2:--now-color_grouped--Green-3 Opção 3 (acessível):--now-color_grouped--Green-4
Verde-amarelado		Variável da web Opção 1:--now-color_grouped--Green-Yellow-2 Opção 2:--now-color_grouped--Green-Yellow-3 Opção 3 (acessível):--now-color_grouped--Green-Yellow-4
Magenta		Variável da web Opção 1:--now-color_grouped--magenta-2 Opção 2:--now-color_grouped--magenta-3 Opção 3 (acessível):--now-color_grouped--magenta-4
Laranja		Variável da web Opção 1:--now-color_grouped--orange-2 Opção 2"--now-color_grouped--orange-3 Opção 3 (acessível):--now-color_grouped--orange-4
Rosa		Variável da web Opção 1:--now-color_grouped--pink-2 Opção 2:--now-color_grouped--pink-3 Opção 3 (acessível):--now-color_grouped--pink-4
Roxo		Variável da web Opção 1:--now-color_grouped--purple-2 Opção 2:--now-color_grouped--purple-3 Opção 3 (acessível):--now-color_grouped--purple-4
Turquesa		Variável da web Opção 1:--now-color_grouped--teal-2 Opção 2:--now-color_grouped--teal-3 Opção 3 (acessível):--now-color_grouped--teal-4
Amarelo		Variável da web Opção 1:--now-color_grouped--yellow-2 Opção 2:--now-color_grouped--yellow-3 Opção 3 (acessível):--now-color_grouped--yellow-4