Temas e aparência

Os 6 temas do Éclair mudam a cara do seu site em um clique: cor, fontes, cabeçalho e apresentação das listas. Você os experimenta no seu site de verdade, com a pré-visualização ao vivo, no computador ou no celular, e nada é publicado antes de você salvar. Já os seus conteúdos, a sua velocidade e o seu SEO continuam exatamente como estão.

Quais são os 6 temas do Éclair?

Os temas do Éclair vêm com o CMS desde a versão 1.3.0. Cada um tem a sua personalidade e o seu público:

Todos os temas exibem os mesmos blocos, o blog e a loja leve: escolha o que combina com a sua atividade, não o que “contém” uma função.

Como trocar de tema?

São só cinco etapas, pré-visualização incluída:

1. Abra Configurações › Aparência.
2. Em Tema, clique no card de que você gostar. A cor, as fontes, o cabeçalho e a apresentação das listas dele passam a valer de imediato no formulário.
3. Em Pré-visualização ao vivo, escolha a página exibida (Início, Blog, Um artigo, A loja ou Um produto) e alterne entre Computador e Celular. Você pode navegar pela pré-visualização: os links continuam dentro dela.
4. Ajuste o que quiser (cor principal, fontes, cabeçalho, listas, modo escuro): a pré-visualização acompanha cada mudança.
5. Clique em Salvar. O cache das páginas é limpo automaticamente: o seu site muda na mesma hora.

O que cada tema configura quando você o escolhe?

Estas são as configurações recomendadas que cada tema aplica, todas editáveis depois:

Quais outras configurações de aparência você pode alterar?

Ainda em Configurações › Aparência, abaixo da pré-visualização:

Para a cor principal, o Éclair busca um contraste de pelo menos 4,5:1 entre os links e o fundo, o mínimo exigido pelo critério WCAG 1.4.3 para texto comum. Se a sua cor não chega lá, os links usam uma versão mais escura (mais clara no modo escuro), e o texto dos botões fica branco ou preto, conforme o que se lê melhor.

Por que um tema não deixa o seu site mais lento?

Porque cada tema é apenas uma folha de estilo de 1,5 a 3 KB, somada à folha de estilo base. O tema Éclair, por sua vez, não acrescenta nada: ele é o estilo base.

• O HTML não muda de um tema para outro: velocidade, acessibilidade, dados estruturados e SEO continuam iguais.
• Só o tema ativo é inserido na página, junto com o resto do CSS: nenhum arquivo a mais para baixar.
• O modo escuro automático funciona com cada um dos 6 temas.
• Os estilos da loja só são inseridos quando ela está aberta: um site institucional nunca os carrega.

Como adicionar o seu próprio CSS?

Para ir além do tema (a cor de um botão, os espaçamentos, o estilo de um bloco), cole as suas regras em Configurações › Aparência › CSS personalizado e salve.

• Elas têm prioridade sobre o tema: são adicionadas depois dele em cada página.
• Elas sobrevivem às atualizações desde o Éclair 1.5.0: ficam guardadas com os seus dados, em data/, que a atualização não toca.
• Os marcadores do modo escuro funcionam: as regras colocadas entre /*dark*/ e /*/dark*/ somem quando o modo escuro está em “Sempre claro”.
• Por segurança, o caractere <, as regras @import e os caracteres de controle são removidos, e o campo aceita no máximo 64 KB.

Por exemplo, para botões com cantos levemente arredondados e um rodapé mais escuro no modo escuro:

.btn { border-radius: 6px; }

/*dark*/@media (prefers-color-scheme: dark) { .site-footer { background: #0d0d12; } }/*/dark*/

O que os temas não fazem?

• Eles não mudam a estrutura das páginas. Para mover um elemento ou acrescentar uma área, é preciso editar os templates PHP de app/theme/, como explica a página Para desenvolvedores. Uma atualização os substitui: guarde uma cópia dos seus arquivos.
• Não há catálogo de temas para baixar nem plugins: os 6 temas vêm com o Éclair. A ausência de plugins é uma escolha, em nome da velocidade e da segurança.
• Nada de fontes da web nas configurações: só fontes do sistema, que já estão no dispositivo do visitante.
• O CSS personalizado não importa nada: sem @import, ele não consegue carregar outra folha de estilo.

O que fazer se a aparência não mudar?

O passo a passo original também está no guia oficial do Éclair, e o detalhe das versões 1.3.0 a 1.5.0 está no changelog.