---
sourceDocument: Interface do usuário da Now Platform Yokohama
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/pt-BR/yokohama/platform-user-interface

 Release :

    - yokohama

ft:locale :

    - pt-BR

ft:publication_title :

    - Interface do usuário da Now Platform Yokohama

ft:clusterId :

    - platux

bundleId :

    - platux

workflow :

    - Platform


---

# Trabalhando com imagens de estado vazio com tema

# Trabalhando com imagens de estado vazio com tema {#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

Adicione imagens de estado vazio com tema para personalizar estados vazios e melhorar a experiência do usuário. os estados vazios incluem orientação ou ações para que os usuários adicionem ou criem conteúdo.

Quando um componente ou uma parte do seu Next Experiencea página da web não contém dados, uma imagem de estado vazia é exibida. As imagens de estado vazio podem ser adaptadas a temas e se adaptam às cores do tema da sua instância.  
Figura 1. Imagem de estado vazio

Há 12 tipos de imagem de estado vazio disponíveis, cada uma incluindo uma versão pequena, média e grande. Ao criar um tema usando Construtor de temasUm registro de Imagens de estilos de UX é criado. No entanto, o registro está vazio. Nesse caso, o tema usa como padrão imagens compatíveis com tema de estado vazio do sistema base. Se você optar por substituir essas imagens, consulte [Personalize imagens de estado vazio com tema para o seu tema](https://servicenow-prod.fluidtopics.net/5lV5a2MIySFrC1VROTH6pg "Personalize imagens de estado vazio com tema padrão para seu Next Experiencee. Construtor de temasTemas usando o registro de Imagens do tema.").

Você pode inserir uma imagem de estado vazia em sua experiência personalizada usando o componente Ilustração em Construtor de IU. O componente de ilustração exibe todas as imagens de estado vazias disponíveis. Para obter mais informações sobre o componente de ilustração, consulte [Estado vazio do sistema de design do Horizon](https://horizon.servicenow.com/components/now-template-message-empty-state).

Você também pode adicionar imagens personalizadas usando o componente Ilustração personalizada em Construtor de IU.

## Imagem de estado vazio passível de tema com ganchos de tema {#themeable-empty-state-images__section_emd_kmj_4cc}

As imagens a seguir representam a imagem de estado vazio Sem resultados de pesquisa junto com os ganchos de tema necessários para cada variação.  
Figura 2. Nenhum resultado de pesquisa (destaque sólido)

O gancho de tema necessário para esta variação é <kbd class="ph userinput">now-color_interactive-1 </kbd>.  
Figura 3. Nenhum resultado de pesquisa (contorno de acento)

O gancho de tema necessário para esta variação é <kbd class="ph userinput">now-color_interactive-3 </kbd>.  
Figura 4. Nenhum resultado de pesquisa (contornos sutis)

O gancho de tema necessário para esta variação é <kbd class="ph userinput">now-color_border-secondary </kbd>.  
Figura 5. Nenhum resultado de pesquisa (detalhe escuro do assunto)

O gancho de tema necessário para esta variação é <kbd class="ph userinput">now-color_border-terciário </kbd>.  
Figura 6. Nenhum resultado de pesquisa (detalhe da luz do assunto)

O gancho de tema necessário para esta variação é <kbd class="ph userinput">now-color_background-secondary </kbd>.  
Figura 7. Nenhum resultado de pesquisa (preenchimento de assunto)

O gancho de tema necessário para esta variação é <kbd class="ph userinput">now-color_background-primary </kbd>.  
Figura 8. Nenhum resultado de pesquisa (resumo do assunto)

O gancho de tema necessário para esta variação é <kbd class="ph userinput">now-color_border-secondary </kbd>.  
Figura 9. Nenhum resultado de pesquisa (sombras de assunto)

O gancho de tema necessário para esta variação é <kbd class="ph userinput">now-color_border-secondary </kbd>.

## Tokens do modo de luz de estado vazio {#themeable-empty-state-images__section_mmr_hjb_qcc}

Figura 10. Imagem de estado vazio do objeto principal  
Os ganchos de tema usados para substituir a imagem de estado vazio do objeto principal.

* now-illustration--empty-state--main-object--outline
* now-illustration--empty-state--main-object--fill
{#themeable-empty-state-images__ul_trl_25d_rcc}  
Figura 11. Imagem de estado vazio do objeto primário  
Os ganchos de tema usados para substituir a imagem de estado vazio do objeto primário.

* now-illustration--empty-state--primary-object--outline
* now-illustration--empty-state--primary-object--primary-fill
* now-illustration--empty-state--primário-object--terciário-fill
* now-illustration--empty-state--primary-object--main-detail
* now-illustration--empty-state--primary-object--detalhe
* now-illustration--empty-state--primary-object--shadow
{#themeable-empty-state-images__ul_lnl_lwd_rcc}  
Figura 12. Imagem de estado vazio do objeto terciário  
Os ganchos de tema usados para substituir a imagem de estado vazio do objeto terciário.

* now-illustration--empty-state--terciário-object--contorno
* now-illustration--empty-state--terciário-object--primary-fill
* now-illustration--empty-state--terciário-object--terciário-fill
* now-illustration--empty-state--terciário-object--main-detail
* now-illustration--empty-state--terciário-object--detalhe
* now-illustration--empty-state--terciário-objeto--sombra
{#themeable-empty-state-images__ul_oll_pyd_rcc}  
Figura 13. Imagem de estado vazio do plano de fundo  
Os ganchos de tema usados para substituir a imagem de estado vazio do plano de fundo.

* now-illustration--empty-state--background--lines
* now-illustration--empty-state--background--terciário-lines
* now-illustration--empty-state--background--object-outline
* now-illustration--empty-state--background--object-detail
* now-illustration--empty-state--background--object-shadow
* now-illustration--empty-state--background--object-fill
{#themeable-empty-state-images__ul_h1h_2b2_rcc}

## Fallbacks do modo de luz de estado vazio {#themeable-empty-state-images__section_g1j_lf2_rcc}

{#themeable-empty-state-images__table_in3_rf2_rcc__entry__2}

| Objeto | Declaração de estilo |
|-|-|
| Objeto principal | 
 .main-object--outline {
  fill:rgb(var(--empty-state--main-object--outline), var(--main-object--outline), var(--now-color--interactive-3), 51,53,123);
} |
| Objeto principal | 
 .main-object--fill {
  fill:rgb(var(--empty-state--main-object--fill), var(--main-object--fill), var(--now-color--interactive-1), 144,146,213);
} |
| Objeto primário | 
 .primary-object--outline {
  fill:rgb(var(--empty-state--primary-object--outline), var(--primary-object--outline), var(--now-color--border--secondary), 176,181,191);
} |
| Objeto primário | 
 .primary-object--primary-fill {
 fill:rgb(var(--empty-state--primary-object--primary-fill), var(--primary-object--primary-fill), var(--now-color--background--primary), 255,255,255);
} |
| Objeto primário | 
 .primary-object--tertiary-fill {
 fill:rgb(var(--empty-state--primary-object--tertiary-fill), var(--primary-object--tertiary-fill), var(--now-color--background--secondary), 246,246,248);
} |
| Objeto primário | 
 .primary-object--main-detail {
 fill:rgb(var(--empty-state--primary-object--main-detail), var(--primary-object--main-detail), var(--now-color--border--secondary), 176,181,191);
} |
| Objeto primário | 
 .primary-object--detail {
  fill:rgb(var(--empty-state--primary-object--detail ), var(--primary-object--detail ), var(--now-color--border--tertiary), 211,214,220);
} |
| Objeto primário | 
 .primary-object--shadow {
  fill:rgb(var(--empty-state--primary-object--shadow), var(--primary-object--shadow), var(--now-color--background--tertiary), 228,230,234);
} |
| Objeto terciário | 
 .tertiary-object--outline {
  fill:rgb(var(--empty-state--tertiary-object--outline), var(--tertiary-object--outline), var(--now-color--border--secondary), 176,181,191);
} |
| Objeto terciário | 
 .tertiary-object--primary-fill {
 fill:rgb(var(--empty-state--tertiary-object--primary-fill), var(--tertiary-object--primary-fill), var(--now-color--background--primary), 255,255,255);
} |
| Objeto terciário | 
 .tertiary-object--tertiary-fill {
 fill:rgb(var(--empty-state--tertiary-object--tertiary-fill), var(--tertiary-object--tertiary-fill), var(--now-color--background--secondary), 246,246,248);
} |
| Objeto terciário | 
 .tertiary-object--main-detail {
 fill:rgb(var(--empty-state--tertiary-object--main-detail), var(--tertiary-object--main-detail), var(--now-color--border--secondary), 176,181,191);
} |
| Objeto terciário | 
 .tertiary-object--detail {
  fill:rgb(var(--empty-state--primary-object--detail ), var(--primary-object--detail ), var(--now-color--border--tertiary), 211,214,220);
} |
| Objeto terciário | 
 .tertiary-object--shadow {
  fill:rgb(var(--empty-state--tertiary-object--shadow), var(--tertiary-object--shadow), var(--now-color--background--tertiary), 228,230,234);
} |
| Objeto de plano de fundo | 
 .background--lines {
  fill:rgb(var(--empty-state--background--lines), var(--background--lines), var(--now-color--border--tertiary), 211,214,220);
} |
| Objeto de plano de fundo | 
 .background--tertiary-lines {
 fill:rgb(var(--empty-state--background--tertiary-lines), var(--background--tertiary-lines), var(--now-color--border--tertiary), 211,214,220);
} |
| Objeto de plano de fundo | 
 .background--object-outline {
 fill:rgb(var(--empty-state--background--object-outline), var(--background--object-outline), var(--now-color--border--tertiary), 211,214,220);
} |
| Objeto de plano de fundo | 
 .background--object-detail {
  fill:rgb(var(--empty-state--background--object-detail), var(--background--object-detail), var(--now-color--border--tertiary), 211,214,220);
} |
| Objeto de plano de fundo | 
 .background--object-shadow {
  fill:rgb(var(--empty-state--background--object-shadow), var(--background--object-shadow), var(--now-color--background--tertiary), 228,230,234);
} |
| Objeto de plano de fundo | 
 .background--object-fill {
  fill:rgb(var(--empty-state--background--object-fill), var(--background--object-fill), var(--now-color--background--primary), 255,255,255);
} |
[Tabela 1. Declarações de estilo de fallback do modo claro de estado vazio]

{#themeable-empty-state-images__table_in3_rf2_rcc}
* **[Personalize imagens de estado vazio com tema para o seu tema](https://servicenow-prod.fluidtopics.net/5lV5a2MIySFrC1VROTH6pg)**   
  Personalize imagens de estado vazio com tema padrão para seu Next Experiencee. Construtor de temasTemas usando o registro de Imagens do tema.