---
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 descrições de entrada

# Suporte de variável de cor para descrições de entrada {#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 descrições de entrada para celular.

|-|-|
| Use variáveis de cor no Descrição campo de suas entradas para controlar a cor do texto. Use variáveis de cor no Descrição campo de suas entradas para controlar a cor do texto quando Descrição o campo está configurado como <kbd class="ph userinput">HTML </kbd>. Por exemplo, além de valores hexadecimais de cor, como `FF0000 `, você pode usar uma variável de cor, como `--now-color-primary-0 `. Para obter uma lista de variáveis disponíveis, consulte [Considerações sobre tema de cores para celular](https://servicenow-prod.fluidtopics.net/2NU2mJBJlI6wXAlQxFLBHw "Saiba como usar cores em seus aplicativos para celular para melhorar a experiência do usuário. O uso das cores certas para o seu ambiente pode ajudar a orientar os usuários pelo app e identificar rapidamente informações importantes."). Para obter detalhes sobre entradas, consulte [Configure uma tela de formulário de entrada](https://servicenow-prod.fluidtopics.net/vWwOfrRFqwdFlqYOnEodww "Configure um parâmetro de entrada para que seus usuários possam ver uma lista de registros do app para celular. Para acessar um registro da lista, um usuário só precisa tocar no nome do registro."). |   |
[ ]

{#color-var-input-description__table_vwc_wg2_zvb}

## Guia de cores da descrição de entrada {#color-var-input-description__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-input-description__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-input-description__table_otd_c1q_1xb} {#color-var-input-description__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-input-description__table_f5d_c1q_1xb}