--- 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 regras de IU # Suporte de variável de cor para regras de IU {#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 regras de IU para celular. |-|-| | Use as seguintes variáveis de cor no Valor Seu campo de regras de IU com Operação campo definido como Defina o estilo de IU * `Variable de cor de fundo` * `Fonte ColorVariable `fora ou dentro de `TextDecorador ` {#color-var-ui-rule__ul_nnz_533_ywb} 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. Por exemplo: `"BackgroundColorVariable": "--now-color-secondary-3", "BackgroundColor": "3f2c11"` Para obter detalhes sobre como criar essas ações de regra de IU, consulte [Criar uma ação de regra de IU para celular](https://servicenow-prod.fluidtopics.net/0Uxi_oWdHt_iR7j3ZDFYyg "Crie as ações que são executadas quando as condições da regra de IU para celular são atendidas."). | | [ ] {#color-var-ui-rule__table_fbp_nfb_yvb} ## Guia de cores da regra de IU para celular {#color-var-ui-rule__section_vvh_wzp_1xb} 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. {#color-var-ui-rule__table_otd_c1q_1xb__entry__3} | Nome da cor | Exemplo | Variáveis de cor | |-|-|-| | Crítico | | Variável móvel : `alert--critical-0` Variável da web : `--now-color_alert--critical-0` | | Alto(a) | | Variável móvel : `alert--high-0` Variável da web : `--now-color_alert--high-0` | | Aviso | | Variável móvel : `alert--warning-0` Variável da web : `--now-color_alert--warning-0` | | Moderado(a) | | Variável móvel : `alert--moderate-0` Variável da web : `--now-color_alert--moderate-0` | | Informações | | Variável móvel : `alert--info-0` Variável da web : `--now-color_alert--info-0` | | Positivo | | Variável móvel : `alert--positive-0` Variável da web : `--now-color_alert--positive-0` | | Baixo(a) | | Variável móvel : `alert--low-0` Variável da web : `--now-color_alert--low-0` | | Desativado | ![Esquema de cores de alerta desabilitado]() | Variável móvel : `alerta-desabilitado-segundo plano` Variável da web : `--now-color_background--secondary` | | Crítico (alternativo) | ![Esquema de cores de alerta crítico alternativo]() | Variável móvel : `alert--critical-4` Variável da web : `--now-color_alert--critical-4` | | Alto (alternativo) | ![Esquema de cores de alerta alto alternativo]() | Variável móvel : `alert--high-4` Variável da web : `--now-color_alert--high-4` | | Aviso (alternativo) | ![Esquema de cores de alerta de aviso alternativo]() | Variável móvel : `alert--warning-4` Variável da web : `--now-color_alert--warning-4` | | Moderado (alternativo) | ![Esquema de cores de alerta moderado alternativo]() | Variável móvel : `alert--moderate-4` Variável da web : `--now-color_alert--moderate-4` | | Informações (alternativa) | ![Esquema de cores do alerta de informações alternativo]() | Variável móvel : `alert--info-4` Variável da web : `--now-color_alert--info-4` | | Positivo (alternativo) | ![Esquema de cores de alerta positivo alternativo]() | Variável móvel : `alert--positive-4` Variável da web : `--now-color_alert--positive-4` | | Baixo (alternativo) | ![Esquema de cores de alerta baixo alternativo]() | Variável móvel : `alert--low-4` Variável da web : `--now-color_alert--low-4` | | Desabilitado (alternativo) | ![Alternativa de esquema de cores de alerta desabilitada]() | Variável móvel : `texto-desabilitado-alerta` Variável da web : `--now-color_text--terciário` | [Tabela 1. Paleta de cores do alerta] {#color-var-ui-rule__table_otd_c1q_1xb} {#color-var-ui-rule__table_f5d_c1q_1xb__entry__3} | Nome da cor | Exemplo | Opções de cor | |-|-|-| | Azul | ![Esquema de cores agrupadas em azul]() | Variável da web : `--now-color_grouped--blue-0` | | Marrom | ![Esquema de cores agrupadas marrom]() | Variável da web : `--now-color_grouped--brown-0` | | Cinza | ![Esquema de cores agrupadas em cinza]() | Variável da web : `--now-color_grouped--grey-0` | | Verde | ![Esquema de cores agrupadas em verde]() | Variável da web : `--now-color_grouped--green-0` | | Amarelo esverdeado | ![Esquema de cores agrupadas verde-amarelo]() | Variável da web : `--now-color_grouped--verde-amarelo-0` | | Magenta | ![Esquema de cores agrupadas em magenta]() | Variável da web : `--now-color_grouped--magenta-0` | | Laranja | ![Esquema de cores agrupadas laranja]() | Variável da web : `--now-color_grouped--laranja-0` | | Rosa | ![Esquema de cores agrupadas rosa]() | Variável da web : `--now-color_grouped--pink-0` | | Roxo | ![Esquema de cores agrupadas roxo]() | Variável da web : `--now-color_grouped--purple-0` | | Turquesa | ![Esquema de cores agrupadas azul-petróleo]() | Variável da web : `--now-color_grouped--teal-0` | | Amarelo | ![Esquema de cores agrupadas amarelo]() | Variável da web : `--now-color_grouped--yellow-0` | | Azul (alternativo) | ![Esquema de cores agrupadas azul alternativo]() | Variável da web : `--now-color_grouped--blue-4` | | Marrom (alternativo) | ![Esquema de cores agrupadas marrom alternativo]() | Variável da web : `--now-color_grouped--brown-4` | | Cinza (alternativo) | ![Esquema de cores agrupadas cinza alternativo]() | Variável da web : `--now-color_grouped--grey-4` | | Verde (alternativo) | ![Esquema de cores agrupadas verde alternativo]() | Variável da web : `--now-color_grouped--green-4` | | Verde-Amarelo (alternativo) | ![Esquema de cores agrupadas verde-amarelo alternativo]() | Variável da web : `--now-color_grouped--verde-amarelo-4` | | Magenta (alternativo) | ![Esquema de cores agrupadas magenta alternativo]() | Variável da web : `--now-color_grouped--magenta-4` | | Laranja (alternativo) | ![Esquema de cores agrupadas laranja alternativo]() | Variável da web : `--now-color_grouped--laranja-4` | | Rosa (alternativo) | ![Esquema de cores agrupadas rosa alternativo]() | Variável da web : `--now-color_grouped--pink-4` | | Roxo (alternativo) | ![Esquema de cores agrupadas roxo alternativo]() | Variável da web : `--now-color_grouped--purple-4` | | Azul-petróleo (alternativo) | ![Esquema de cores agrupadas azul-petróleo alternativo]() | Variável da web : `--now-color_grouped--teal-4` | | Amarelo (alternativo) | ![Esquema de cores agrupadas amarelo alternativo]() | Variável da web : `--now-color_grouped--yellow-4` | [Tabela 2. Paleta de cores agrupada] {#color-var-ui-rule__table_f5d_c1q_1xb}