Pular para o conteúdo principal

Estilos customizados

Configuração de estilos customizados para o Portal do Cliente.

O que é um tema?​

Um tema é um conjunto de arquivos que define a aparência do seu site, incluindo modelos, estilos, funções e, em alguns casos, imagens e scripts JavaScript. Você pode optar por utilizar um dos temas padrão ou desenvolver um tema personalizado conforme suas necessidades.

API de tema

Customização de estilos​

Através da API de tema é possível customizar os estilos do Portal Cliente. Para configurar um estilo customizado é necessário informar um Cascading Style Sheets (CSS) respeitando as estruturas de classes, ids e tags do sistema.

info

Recomendamos não utilizar seletores para classes para evitar conflitos com o CSS padrão do sistema. As classes geradas por nossa arquitetura podem sofrer alterações a qualquer momento.

O seletor data-stylesid faz parte da nossa arquitetura e através dele você pode estar customizando os estilos do sistema.

Para saber mais sobre customização utilizando CSS acesse o Guia CSS

cURL de exemplo da configuração
  curl --location 'https://api.base39.io/v1/tenants/branding/themes/<SEU_DOMINO>' \
  --header 'Authorization: Bearer <SUA_API_KEY>' \
  --header 'accept: application/json' \
  --header 'content-type: application/json' \
  --data '
  {
    "customStyles": {
      header { background-color: #008000 !important}

      [data-stylesid="product-card"]:nth-of-type(1) {
        background-color: #ff7b07;
      }

      [data-stylesid="product-pending-card"]  {
        background-color: #ff12e0;

        [data-stylesid="contrast-data"] {
          color: #efefef;
          font-weight: bold;
          font-size: 1.5rem;
          background-color: #fff;

          h5 {
            color: #000 !important;
          }

          p {
            color: #ffe60e;
          }
        }

        [data-stylesid="tag"] {
          background-color: #008000;
          border: 1px solid #ffe60e;
        }
      }
    }
  }
'

Exemplos de aplicações de CSS​

Utilização de Dark-Light mode​

Para implementar o modo escuro (dark mode) e o modo claro (light mode) em CSS e mudar a URL da imagem com base nesses modos, você pode usar a media query prefers-color-scheme para detectar a preferência de esquema de cores do sistema do usuário.

Aqui está um exemplo de como você pode fazer isso:

CSS para Modos Escuro e Claro:

  • No modo escuro, a imagem terá uma URL específica.
  • No modo claro, ela terá outra URL.
/* Modo Claro (padrão) */
[data-testid="login-wrapper"] img {
  content: url("https://seu-host.com.br/base39/logo.png");
}

/* Modo Escuro */
@media (prefers-color-scheme: dark) {
  [data-testid="login-wrapper"] img {
    content: url("https://seu-host.com.br/base39/logo-white.png");
  }
}

Explicação:

  • O seletor [data-stylesid="login-wrapper"] img é usado para aplicar o estilo à imagem dentro do elemento que tem o data-testid igual a "login-wrapper". Isso garante que você está acessando especificamente essa imagem.
  • No @media (prefers-color-scheme: dark), especificamos uma nova URL para a imagem quando o esquema de cores do sistema está definido para escuro.

Importante:

  • Certifique-se de substituir https://seu-host.com.br/base39/logo_dark.png pela URL correta da imagem que você deseja usar no modo escuro.
  • Este exemplo assume que o navegador do usuário respeita e aplica as configurações de prefers-color-scheme. Certifique-se de que seus usuários estão em um ambiente que suporta essa funcionalidade.
atenção

Os temas do navegador não controlam o que o seletor de mídia CSS prefers-color-scheme apresenta, o mesmo vai retornar as configurações que estiverem sendo aplicadas pelo dispositivo do usuário. Desta maneira, mesmo que seja alterado no browser ele não vai surtir efeito caso esteja sendo aplicado dark ou light mode diretamente no dispositivo do usuário.

Este código deve atender às suas necessidades para alternar a imagem com base no modo de cor. Se precisar de ajustes adicionais ou funcionalidades específicas, sinta-se à vontade para perguntar!