Configurar um tema Next Experience

Adicione os estilos que você criou ao seu tema para modificar a aparência da experiência do usuário.

Antes de Iniciar

Certifique-se de que as seguintes propriedades do sistema estejam definidas como Verdadeiras:

• glide.ui.polaris.experience
• glide.ui.polaris.dark_themes_enabled — Para reutilizar a variante escura do Polaris neste tema.

Função necessária: administrador

Por Que e Quando Desempenhar Esta Tarefa

O tema Next Experience padrão é chamado de Polaris. Você pode reutilizar ou personalizar o tema do Polaris como ponto de partida ao criar ou modificar seus próprios temas.

Procedimento

1. Navegar até Todos > Estrutura do Now Experience > Gestão de temas > Temas.
2. Selecione Novo para criar um registro de tema.
3. Insira um nome e uma descrição para o seu tema.
4. Selecione o ícone Ações ) e selecione Salvar.
5. Na guia Composicional: tema do app, insira linhas para adicionar estilos associados ao seu tema.
   Você atribui valores em quatro colunas:

   Capacidade de aplicação

   A aplicabilidade é especificada para substituir o tema base. Os usuários que atendem às restrições de aplicabilidade veem essas substituições em seu tema em vez do estilo base. Por exemplo, um estilo com fontes diferentes pode ser aplicado a gerentes. Os usuários que atendem à aplicabilidade do gerente verão fontes diferentes na IU do Next Experience, que substitui os valores do tema do sistema de base. Os administradores não precisam copiar ou criar um tema inteiro com mudanças para o público aplicável.

   Nota:

   Deixar a Restrição de aplicabilidade em branco aplicará o estilo a todos os usuários.

   Ordem

   A ordem especifica quando o estilo é aplicado. Quanto maior for a ordem, maior será a prioridade.

   Nota:

   Se quiser usar um estilo personalizado, certifique-se de que o número de ordem do estilo seja maior do que o estilo Polaris padrão.

   Estilo

   Você pode configurar quatro estilos principais. Você não pode editar os nomes de estilo usados no tema Polaris, mas pode copiar o código JSON associado a cada estilo desse tema e colá-lo e editá-lo no formulário do seu estilo personalizado.

   • Cores: as propriedades de cor do tema e quaisquer variantes básicas que você queira adicionar. Na seção base do estilo de cor, um subconjunto das cores que o tema usa é definido com valores RGB. O tema gera mais de 20 gradientes dessas cores na aplicação.
   • Forma e formulário: a aparência das bordas, bem como dos botões e de outros controles da IU.
   • Imagens: adicione imagens usadas no tema da sua aplicação.
   • Tipografia: as fontes usadas em todo o aplicativo.

   Tipo

   Existem dois tipos: Core e Variante. Os estilos principais incluem cor, forma e formulário, tipografia e imagens. As variantes são uma versão diferente do tema, cores diferentes, que os usuários podem selecionar nas preferências. A variante mais comum é uma versão escura do tema. O tema escuro é a única variante enviada com Next Experience. Para obter mais informações, consulte Explorando temas no Next Experience.

6. Selecione o campo Estilo e selecione o .
7. Selecione Novo.
8. Selecione as cores Primárias, Secundárias e Neutras.
   Nota:

   Um tema é composto por várias variáveis, portanto, você pode observar a coloração padrão do tema do Polaris aparecendo em diferentes locais.
9. Quando você tiver as cores da identidade visual da sua organização, navegue até o gerador de cores https://theme.deoprototypes.com/color-generator-algo-v1.
10. Selecione o botão Gerar automaticamente.

    Um pop-up modal que solicita que você insira as três cores da sua organização.

11. Insira os valores de código hexadecimal para as cores da sua organização.
12. Clique em Gerar.
13. Clique em Copiar JSON para coletar suas variáveis CSS.
14. Preencha o formulário de estilo de UX.

    Campo	Descrição
    Nome	O nome do seu estilo de UX.
    Tipo	Núcleo Variante Para obter mais informações sobre tipos, consulte Diferença entre estilos principais e variantes.
    Estilo	Os valores de cores, formas e formulários. Alguns dos valores são cores e alguns, como bordas, são valores de pixel. Importante: O código JSON deve ser encapsulado como o seguinte.
    Aplicação	O escopo do estilo de UX.

15. Selecione Enviar.
16. Selecione Atualizar.
    Nota:

    Para usar o novo tema para substituir o tema padrão, consulte Substituir o tema Next Experience.