Configurar um tema Next Experience

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

Antes de Iniciar

Certifique-se de que as seguintes propriedades do sistema, localizadas em sys_properties.list, estejam definidas como verdadeiras:

• glide.ui.polaris.experience
• glide.ui.polaris.dark_themes_enabled: para reutilizar a variante escura Next Experience neste tema.

Função necessária: administrador

Por Que e Quando Desempenhar Esta Tarefa

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

Por Que e Quando Desempenhar Esta Tarefa

Nota:

Se você estiver personalizando um tema criado com Construtor de temas e inserir um código JSON inválido, não poderá salvar o registro do tema. Ao trabalhar no registro do tema de UX, você pode navegar até a página do Editor usando o botão Abrir no Construtor de temas. Para obter mais informações, consulte Gerenciar ou editar um tema com Construtor de temas.

Procedimento

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

   Capacidade de Aplicação

   Substitui 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 gerenciador veem as diferentes fontes na IU Next Experience, que substitui os valores do tema do sistema 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

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

   Nota:

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

   Estilo

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

   • Cores: especifica as propriedades de cor do tema e todas as variantes de base que você deseja adicionar. Na seção base do estilo de cor, um subconjunto das cores que o tema usa é definido com valores Vermelho, Verde, Azul (RGB). O tema gera mais de 20 gradientes dessas cores na aplicação.
   • Forma: especifica a aparência das bordas, bem como os botões e outros controles de IU.
   • Imagens: adiciona imagens que são usadas no tema da sua aplicação.
   • Tipografia: especifica as fontes usadas em toda a aplicação.

   Tipo

   Especifica dois tipos: Core e Variant. Os estilos principais incluem cor, forma e forma, tipografia e imagens. As variantes especificam uma versão diferente do tema, como as diferentes cores que os usuários podem selecionar. 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 Exploração de temas no Next Experience.

6. Selecione o campo Estilo e selecione o .
7. Selecione Novo.
8. Selecione Cores primárias, secundárias e neutras.
   Nota:

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

    Um modal aparece e 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. Selecione Gerar.
13. Reúna suas variáveis CSS selecionando Copiar JSON.
14. Preencha o formulário de estilo de UX.

    Campo	Descrição
    Nome	Nome do seu estilo de UX.
    Tipo	Core Variante Para obter mais informações sobre tipos, consulte Diferença entre estilos principais e variantes.
    Estilo	Valores para 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 conforme mostrado no exemplo a seguir.
    Aplicaçã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.