--- sourceDocument: Zurich Mobile Configuration e navegação sourceDocumentLink: https://www.servicenow.com/docs/r/pt-BR/zurich/mobile Release : - zurich ft:locale : - pt-BR ft:publication_title : - Zurich Mobile Configuration e navegação ft:clusterId : - mobile bundleId : - mobile workflow : - Platform --- # Suporte a variáveis de cor para ícones # Suporte a variáveis de cor para ícones {#ariaid-title1} * Versão de lançamento: Zurich * * Atualizado 31 de jul. de 2025 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 3 min. de leitura Saiba como usar variáveis de cor para mudar temas nas telas de mapa do seu celular |-|-| | Os ícones para celular têm um Definir aparência seção usada para definir a aparência dos ícones. Use ColorVariable opção de estilo para usar uma variável de cor uma cor. Usando este estilo, 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. Para obter detalhes sobre como criar telas de mapa, consulte [Configurar uma seção de IU de ícone](https://www.servicenow.com/docs/maxknY8gL1l0jkNE4Ji5LQ "Use o tipo de seção IU do ícone para navegar até telas, telas do inicializador e funções."). Para obter detalhes sobre como criar ícones em dispositivos móveis, consulte [Ícones de dispositivos móveis](https://www.servicenow.com/docs/lP_lxVPwtznSTLNIZkl~9g "Use ícones para fornecer identificadores exclusivos para navegação e ações em seus aplicativos para celular."). | | [ ] {#color-var-mobile-icons__table_st2_mtb_yvb} ## Guia de cores do ícone para celular {#color-var-mobile-icons__section_ffp_xkg_cxb} As variáveis de cor são divididas em Usar 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 seu app. 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 contêm texto para melhorar a navegabilidade dos usuários. {#color-var-mobile-icons__table_otd_c1q_1xb__entry__3} | Nome da cor | Exemplo | Variáveis de cor | |-|-|-| | Crítico | ![Ícones essenciais para dispositivos móveis]() | Variáveis para dispositivos móveis : * Opção 1: `crítico-2 ` * Opção 2: `crítico-3 ` * Opção 3 (acessível): `crítico-4 ` {#color-var-mobile-icons__ul_hqj_lzh_cxb} 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 ` {#color-var-mobile-icons__ul_wvy_lzh_cxb} | | Alto(a) | ![Ícones móveis altos]() | Variáveis para dispositivos móveis : * Opção 1: `alerta--alto-2 ` * Opção 2: `alerta--alto-3 ` * Opção 3 (acessível): `alerta--alto-4 ` {#color-var-mobile-icons__ul_lsh_rxm_cxb} 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 ` {#color-var-mobile-icons__ul_msh_rxm_cxb} | | Aviso | ![Ícones para celular de aviso]() | Variáveis para dispositivos móveis : * Opção 1: `alerta--aviso-2 ` * Opção 2: `alerta--aviso-3 ` * Opção 3 (acessível): `alerta--aviso-4 ` {#color-var-mobile-icons__ul_hxg_5xm_cxb} 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 ` {#color-var-mobile-icons__ul_ixg_5xm_cxb} | | Moderado | ![Ícones para dispositivos móveis moderados]() | Variáveis para dispositivos móveis : * Opção 1: `moderado-2 ` * Opção 2: `moderado-3 ` * Opção 3 (acessível): `moderado-4 ` {#color-var-mobile-icons__ul_upy_vxm_cxb} 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 ` {#color-var-mobile-icons__ul_vpy_vxm_cxb} | | Informação | ![Ícones para celular de informações]() | Variáveis para dispositivos móveis : * Opção 1: `alerta--info-2 ` * Opção 2: `alerta--info-3 ` * Opção 3 (acessível): `alerta--info-4 ` {#color-var-mobile-icons__ul_bhs_xxm_cxb} 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 ` {#color-var-mobile-icons__ul_chs_xxm_cxb} | | Positivo | ![Ícones positivos para celular]() | Variáveis para dispositivos móveis : * Opção 1: `-positivo-2 ` * Opção 2: `-positivo-3 ` * Opção 3 (acessível): `-positivo-4 ` {#color-var-mobile-icons__ul_hy3_1ym_cxb} 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 ` {#color-var-mobile-icons__ul_iy3_1ym_cxb} | | Baixo(a) | ![Ícones de dispositivos móveis baixos]() | Variáveis para dispositivos móveis : * Opção 1: `baixo-2 ` * Opção 2: `baixo-3 ` * Opção 3 (acessível): `baixo-4 ` {#color-var-mobile-icons__ul_avy_bym_cxb} 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 ` {#color-var-mobile-icons__ul_bvy_bym_cxb} | [Tabela 1. Paleta de cores do alerta] {#color-var-mobile-icons__table_otd_c1q_1xb} {#color-var-mobile-icons__table_f5d_c1q_1xb__entry__3} | Nome da cor | Exemplo | Opções de cor | |-|-|-| | Azul | ![Ícones móveis azuis]() | 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 ` {#color-var-mobile-icons__ul_lqy_gym_cxb} | | Marrom | ![Ícones móveis marrons]() | 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 ` {#color-var-mobile-icons__ul_kcy_kym_cxb} | | Cinza | ![Ícones cinza para celular]() | Variável da Web : * Opção 1: `-now-color_grouped--grey-2 ` * Opção 2: `-now-color_grouped--grey-3 ` * Opção 3 (acessível): `-now-color_grouped--grey-4 ` {#color-var-mobile-icons__ul_ols_lym_cxb} | | Verde | ![Ícones verdes para celular]() | 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 ` {#color-var-mobile-icons__ul_fy1_nym_cxb} | | Amarelo esverdeado | ![Ícones para celular verde-amarelo]() | Variável da Web : * Opção 1: `-now-color_grouped--green-yelow-2 ` * Opção 2: `-now-color_grouped--green-yelow-3 ` * Opção 3 (acessível): `-now-color_grouped--green-yelow-4 ` {#color-var-mobile-icons__ul_l5v_nym_cxb} | | Magenta | ![Magenta ícones para celular]() | 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 ` {#color-var-mobile-icons__ul_vlk_pym_cxb} | | Laranja | ![Ícones laranja para celular]() | Variável da Web : * Opção 1: `-now-color_grouped--laranja-2 ` * Opção 2" `-now-color_grouped--laranja-3 ` * Opção 3 (acessível): `-now-color_grouped--laranja-4 ` {#color-var-mobile-icons__ul_xyn_qym_cxb} | | Rosa | ![Ícones móveis 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 ` {#color-var-mobile-icons__ul_xsm_rym_cxb} | | Roxo | ![Ícones roxos para celular]() | Variável da Web : * Opção 1: `-now-color_grouped--roxo-2 ` * Opção 2: `-now-color_grouped--roxo-3 ` * Opção 3 (acessível): `-now-color_grouped--roxo-4 ` {#color-var-mobile-icons__ul_dbl_sym_cxb} | | Turquesa | ![Ícones para celular azul-petróleo]() | 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 ` {#color-var-mobile-icons__ul_egx_tym_cxb} | | Amarelo | ![Ícones móveis amarelos]() | 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 ` {#color-var-mobile-icons__ul_w3p_vym_cxb} | [Tabela 2. Paleta de cores agrupada] {#color-var-mobile-icons__table_f5d_c1q_1xb}