--- 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 ícones # Suporte de variável de cor para ícones {#ariaid-title1} * Versão de lançamento: Yokohama * * Atualizado 30 de jan. 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 do mapa para celular |-|-| | Os ícones para celular têm um Definir aparência seção usada para definir a aparência de seus ícones. Use o. Fonte 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 [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."). Para obter detalhes sobre como criar ícones em dispositivos móveis, consulte [Ícones para celular](https://servicenow-prod.fluidtopics.net/ma3Ou1d~xgRJA5uCYde7bg "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 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. Cada cor de suporte tem três opções, incluindo uma opção avaliável. Considere o uso da 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: `alerta--crítico-2 ` * Opção 2: `alerta--crítico-3 ` * Opção 3 (acessível): `alerta--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 de dispositivos móveis 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(a) | ![Moderar ícones para celular]() | Variáveis para dispositivos móveis : * Opção 1: `alerta--moderado-2 ` * Opção 2: `alerta--moderado-3 ` * Opção 3 (acessível): `alerta--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ções | ![Í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 móveis positivos]() | Variáveis para dispositivos móveis : * Opção 1: `alerta--positivo-2 ` * Opção 2: `alerta--positivo-3 ` * Opção 3 (acessível): `alerta--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 móveis baixos]() | Variáveis para dispositivos móveis : * Opção 1: `alerta--low-2 ` * Opção 2: `alerta--low-3 ` * Opção 3 (acessível): `alerta--low-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 móveis 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 | ![Ícones móveis 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 ` {#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 móveis roxos]() | 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 ` {#color-var-mobile-icons__ul_dbl_sym_cxb} | | Turquesa | ![Ícones móveis 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}