---
sourceDocument: Yokohama Mobile Configuração e navegação
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/pt-BR/yokohama/mobile

 Release :

    - yokohama

ft:locale :

    - pt-BR

ft:publication_title :

    - Yokohama Mobile Configuração e navegação

ft:clusterId :

    - mobile

bundleId :

    - mobile

workflow :

    - Platform


---

# Suporte de variável de cor para seções de IU de ícone

# Suporte de variável de cor para seções de IU de ícone {#ariaid-title1}

* Versão de lançamento: Yokohama
* 
* Atualizado 30 de jan. de 2025
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 min. de leitura

Saiba como usar variáveis de cor para alterar temas nas seções da IU do ícone para celular.

|-|-|
| As seções de IU do ícone têm um Cor seção com dois campos para controlar as cores do primeiro plano e do plano de fundo do elemento. * Variável de cor de fundo * Variável da cor em primeiro plano {#color-var-ui-section__ul_ovp_tkb_yvb} Estes dois campos podem ser encontrados nas seguintes tabelas: * Inicializador de destino da seção de ícone \[sys_sg_navigation_section_destination_applet_launcher\] * Função de destino da seção do ícone \[sys_sg_navigation_section_destination_button\] * Tela de destino da seção do ícone \[sys_sg_navigation_section_destination_screen\] {#color-var-ui-section__ul_acr_flx_1xb} Para obter detalhes sobre como criar essas ações, consulte [Configure uma seção de IU de ícone](https://servicenow-prod.fluidtopics.net/Km690Z8FFJJ7l~WK0hKgUg "Use o tipo de seção de IU do ícone para navegar até telas, telas do inicializador e funções."). Você pode definir qualquer variável de cor na 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. |   |
[ ]

{#color-var-ui-section__table_nvp_tkb_yvb}

## Guia de cores da seção de IU do ícone para celular {#color-var-ui-section__section_ffp_xkg_cxb}

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 do alerta
:   As cores da paleta de cores do alerta destacam status, estados e tarefas importantes. Use cores de alerta para comunicar um significado específico em vez de 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 do setor. Use essas cores para mostrar que o item colorido está associado a um setor ou linha de negócios específica. O significado de cada cor depende do contexto, mas deve permanecer consistente no app.

## Paleta de cores do alerta {#color-var-ui-section__section_d55_nbh_cxb}

{#color-var-ui-section__table_otd_c1q_1xb__entry__4}

| Nome da cor | Cor | Exemplo | Opções de cor |
|-|-|-|-|
| Primário | ![Cor do ícone primário]() | ![Exemplo de ícone primário]() | Variável móvel :   `primary` Variável da web :   `--now-color--primary-1 ` |
| Crítico | ![Cor do ícone crítico]() | ![Exemplo de ícone crítico]() | Variável móvel :   `alert--critical-2` Variável da web :   `--now-color_alert--critical-2` |
| Alto(a) | ![Cor do ícone alta]() | ![Exemplo de ícone alto]() | Variável móvel :   `alert--high-2` Variável da web :   `--now-color_alert--high-2` |
| Aviso | ![Cor do ícone de aviso]() | ![Exemplo de ícone de aviso]() | Variável móvel :   `alert--warning-2` Variável da web :   `--now-color_alert--warning-2` |
| Moderado(a) | ![Cor do ícone moderada]() | ![Exemplo de ícone Moderar]() | Variável móvel :   `alert--moderate-2` Variável da web :   `--now-color_alert--moderate-2` |
| Informações | ![Cor do ícone de informações]() | ![Exemplo de ícone de informações]() | Variável móvel :   `alert--info-2` Variável da web :   `--now-color_alert--info-2` |
| Positivo | ![Cor positiva do ícone]() | ![Exemplo de ícone positivo]() | Variável móvel :   `alert--positive-2` Variável da web :   `--now-color_alert--positive-2` |
| Baixo(a) | ![Cor do ícone baixa]() | ![Exemplo de ícone baixo]() | Variável móvel :   `alert--low-2` Variável da web :   `--now-color_alert--low-2` |
[ ]

{#color-var-ui-section__table_otd_c1q_1xb}

## Paleta de cores agrupada {#color-var-ui-section__section_dff_pbh_cxb}

{#color-var-ui-section__table_eff_pbh_cxb__entry__4}

| Nome da cor | Cor | Exemplo | Opções de cor |
|-|-|-|-|
| Azul | ![Cor do ícone azul]() | ![Exemplo de ícone azul]() | Variável da web :   `--now-color_grouped--blue-2` |
| Marrom | ![Cor do ícone marrom]() | ![]() | Variável da web :   `--now-color_grouped--brown-2` |
| Cinza | ![Cor do ícone cinza]() | ![Exemplo de ícone cinza]() | Variável da web :   `--now-color_grouped--grey-2` |
| Verde | ![Cor do ícone verde]() | ![Exemplo de ícone verde]() | Variável da web :   `--now-color_grouped--green-2` |
| Amarelo esverdeado | ![Cor do ícone verde-amarelo]() | ![Exemplo de ícone verde-amarelo]() | Variável da web :   `--now-color_grouped--verde-amarelo-2` |
| Magenta | ![Cor do ícone magenta]() | ![Exemplo de ícone magenta]() | Variável da web :   `--now-color_grouped--magenta-2` |
| Laranja | ![Cor do ícone laranja]() | ![Exemplo de ícone laranja]() | Variável da web :   `--now-color_grouped--laranja-2` |
| Rosa | ![Cor do ícone rosa]() | ![Exemplo de ícone rosa]() | Variável da web :   `--now-color_grouped--pink-2` |
| Roxo | ![Cor do ícone roxo]() | ![Exemplo de ícone roxo]() | Variável da web :   `--now-color_grouped--purple-2` |
| Turquesa | ![Cor do ícone azul-petróleo]() | ![Exemplo de ícone azul-petróleo]() | Variável da web :   `--now-color_grouped--teal-2` |
| Amarelo | ![Cor do ícone amarelo]() | ![Exemplo de ícone amarelo]() | Variável da web :   `--now-color_grouped--yellow-2` |
[ ]

{#color-var-ui-section__table_eff_pbh_cxb}