---
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


---

# Considerações sobre tema de cores

# Considerações sobre tema de cores para dispositivos móveis {#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 cores em seus aplicativos para celular para melhorar a experiência do usuário. Usar as cores certas para o seu ambiente pode ajudar a orientar os usuários por meio do app e identificar rapidamente informações importantes.

## Usando cor {#color-guide-landing__section_rgn_mth_vwb}

Mantenha a consistência em suas decisões de cor em todo o app. Associar tarefas ou fluxos de trabalho específicos a cores ajuda os usuários a saber quando não estão no lugar certo. Considere usar cores iguais ou semelhantes para miniaplicativos relacionados. Por exemplo, selecionar azul para seus applets relacionados a incidentes e verde para applets de ordem de serviço pode ajudar os usuários a acessar tarefas relacionadas rapidamente.

Evite usar muitas cores. Designs simples de duas a três cores resultam em um layout mais limpo e acessível.

A cor pode ser usada para fornecer contraste para maior legibilidade. Em áreas onde o texto aparece, certifique-se de que o texto e o plano de fundo tenham um alto nível de contraste para acomodar usuários de baixa visão e daltônicos. A conformidade com as diretrizes de acessibilidade de conteúdo da Web (WCAG) 2,0 requer uma taxa de contraste de pelo menos 3:1. Existem várias ferramentas online disponíveis para ajudar a medir o contraste de cores.

Alto contraste, cores complementares podem orientar o foco do usuário. Use essas cores para destacar áreas de suas aplicações que precisam da atenção do usuário.

## Diretrizes gerais para variáveis de cor {#color-guide-landing__section_z3c_xhv_xvb}

Antes de começar a usar variáveis de cor, lembre-se das diretrizes a seguir.

Next Experience deve ser habilitado
:   As variáveis de cor só entram em vigor quando Next Experience habilitado. Caso contrário, as variáveis de cor serão ignoradas

As cores disponíveis para variáveis estão na tabela Propriedades do tema de UX

:   As variáveis de cor usam cores definidas na tabela Propriedades do tema de UX \[sys_ux_theme_property\].

Variáveis de cor são propriedades aditivas
:   As propriedades de cor existentes (usando cores codificadas) continuarão a funcionar se as novas variáveis de cor não estiverem configuradas. No entanto, as propriedades de cor não podem mudar dinamicamente a cor dos elementos com base no tema​.

As variáveis de cor substituem as propriedades de cor
:   As variáveis de cor substituem as propriedades de cor não variáveis correspondentes se Next Experience está habilitado e o valor da variável de cor é encontrado.
:   Por exemplo, dada esta configuração de ação de regra de IU:

        {"BackgroundColorVariable": "--now-color-primary-0", "BackgroundColor": "#3f2c11"}

    e um mapa de cores da web com esta configuração:

        {"--now-color-primary-0": "#22ff00"}

    A cor de fundo resolvida para esta ação de regra de IU será `22ff00 `.

As propriedades de cor serão usadas se uma variável não for encontrada ou não tiver valor
:   A variável de cor não será substituída se a variável estiver vazia ou o valor da variável de cor não for encontrado. Nesses casos, a propriedade de cor (HEX) é usada.
:   Por exemplo, dada esta configuração:

        {"BackgroundColorVariable": "", "BackgroundColor": "#3f2c11"}

    O valor da cor é `3f2c11 `.
:   Dada esta configuração:

        {"BackgroundColorVariable": "--now-color-primary-0", "BackgroundColor": "#3f2c11"}

    e um mapa de cores da web com esta configuração:

        {"--now-color-primary-1": "#1134a1"}

    O valor da cor de fundo é `3f2c11 `.

As variáveis de cor usam uma convenção de nomenclatura
:   A convenção de nomenclatura das variáveis de cor é adicionar um `Variável `sufixo para as propriedades de cor existentes. ​
:   Por exemplo, `BackgroundColorVariable `é usado para `BackgroundColor `

Configure variáveis hexadecimais e de cor
:

## Suporte a variáveis de cor por componente {#color-guide-landing__section_xrp_fj5_cxb}

Use esses links para saber como usar variáveis de cor para mudar temas em seus componentes móveis.

* [Suporte a variáveis de cor para regras de IU](https://www.servicenow.com/docs/nZK8oeSQcg6BM86sUB3W2Q "Saiba como usar variáveis de cor para mudar temas em suas regras de IU para celular.")
* [Suporte a variáveis de cor para seções de IU de ícone](https://www.servicenow.com/docs/NE4~eRGrQ757KsYdvQ9Iew "Saiba como usar variáveis de cor para mudar temas nas seções da IU do ícone para celular.")
* [Suporte a variáveis de cor para ícones de mapa](https://www.servicenow.com/docs/gj0~gXSEFm2GFO_xs9yv1w "Saiba como usar variáveis de cor para mudar temas nos ícones de mapa do dispositivo móvel")
* [Suporte a variáveis de cor para ícones](https://www.servicenow.com/docs/gUVSOqb1amV3QxcVjln9Rg "Saiba como usar variáveis de cor para mudar temas nas telas de mapa do seu celular")
* [Suporte a variáveis de cor para modelos de exibição de cartão](https://www.servicenow.com/docs/vd1XwPhaFDCKhxxhRJXyog "Saiba como usar variáveis de cor para mudar temas nas exibições do cartão para celular.")
* [Suporte a variáveis de cor para botões de exibição de cartão](https://www.servicenow.com/docs/tfem7WIy4MNIvRwbqY7O4A "Saiba como usar variáveis de cor para alterar temas nos botões de exibição do cartão do celular.")
* [Suporte a variáveis de cor para descrições de entrada](https://www.servicenow.com/docs/kxgQoNBOTZutKcwXo9fz1Q "Saiba como usar variáveis de cor para mudar temas nas descrições de entrada do dispositivo móvel.")
{#color-guide-landing__ul_o3v_4j5_cxb}