Estilos customizados

​

O que é um tema?

Um tema é um conjunto de arquivos que define a aparência do seu site. Um tema inclui arquivos de modelo, arquivos de estilo, arquivos de funções e possivelmente arquivos de imagem e JavaScript. Você pode usar um dos temas padrão do Ghost ou criar seu próprio tema personalizado.

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.

Atenção: 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 [Guia CSS] https://developer.mozilla.org/pt-BR/docs/Web/CSS

• Pela API

  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.

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!