---
title: "Temas e aparência"
description: "Os temas do Éclair e as 12 direções de arte mudam a cara do seu site, com pré-visualização ao vivo, sem mexer no HTML nem no SEO."
url: "https://eclaircms.org/pt/documentacao/temas"
lang: "pt"
author: "Thierry Gustin"
published: "2026-10-30"
updated: "2026-11-01"
---

# Temas e aparência

> **O essencial** — O Éclair oferece 12 direções de arte, que mudam todo o universo do site (paleta, fonte dos títulos, banner, diferenciais, ícones), e 6 temas clássicos. Você os experimenta em Configurações › Aparência, com uma pré-visualização ao vivo do seu site de verdade, e nada é publicado antes de você salvar. A IA pode imaginar três direções a partir da sua atividade. Os contrastes são garantidos, a fonte é servida pelo seu site e o HTML não muda: a velocidade e o SEO continuam intactos.

Os temas do Éclair mudam a cara do seu site em um clique: cor, fontes, cabeçalho e apresentação das listas. Desde a 1.8, as 12 direções de arte vão além e mudam o universo inteiro. Você experimenta tudo no seu site de verdade, com a pré-visualização ao vivo, e nada é publicado antes de você salvar. Já os seus conteúdos, a sua velocidade e o seu SEO não mudam.

![O mesmo site de um ceramista exibido com os 6 temas do Éclair: Éclair, Editorial, Ateliê, Estúdio, Loja e Contraste](https://eclaircms.org/media/2026/11/pt-themes.webp)
*Um só site, seis estilos: só o tema muda, o conteúdo e o HTML continuam os mesmos.*

## O que é uma direção de arte?

Desde o Éclair 1.8, uma **direção de arte** vai além dos temas clássicos do Éclair: ela muda todo o universo do site a partir de uma ideia concreta (a cidade à noite, o ateliê de cerâmica, o jornal da manhã). Paleta, fonte dos títulos, tamanho dos títulos, cantos, espaçamento, composição do banner, layout dos diferenciais, faixas de cor e ícones mudam juntos.

![O mesmo site de cerâmica em seis direções de arte: Noturno, Galeria, Argila, Riviera, Recreio e Imprensa](https://eclaircms.org/media/2026/11/pt-art-directions.webp)
*O mesmo site em seis das doze direções de arte.*

| Direção | Universo | Fonte dos títulos |
| --- | --- | --- |
| **Noturno** | A cidade à noite: azul profundo, luz âmbar | Big Shoulders Display, em maiúsculas |
| **Galeria** | Paredes brancas, legendas pretas, um vermelho de sinalização | Familjen Grotesk |
| **Argila** | O ateliê de cerâmica: areia, terracota, formas suaves | Young Serif |
| **Botânica** | O herbário e a estufa: verde profundo, papel sálvia | DM Serif Display |
| **Cartaz** | O cartaz suíço: preto sobre branco gelo, laranja vivo | Archivo Black, em maiúsculas |
| **Riviera** | A beira-mar: azul-marinho, céu pálido, coral | Gloock |
| **Escritório** | O papel timbrado: tinta azul-marinho, bordô, fios finos | Libre Caslon Display |
| **Neon** | A tela de criação à noite: quase preto, verde-limão | Unbounded |
| **Delicadeza** | O consultório de cuidados: rosa empoado, ameixa, muito espaço | Cormorant Garamond |
| **Obra** | Concreto, amarelo de segurança, sinalização condensada | Barlow Condensed, em maiúsculas |
| **Recreio** | O pátio da escola: azul-celeste, vermelho-tomate, letras redondas | Fredoka |
| **Imprensa** | O jornal da manhã: papel-jornal, vermelho de capa | Newsreader |

## Como escolher e ajustar uma direção de arte?

1. Em **Configurações › Aparência**, escolha **Direção de arte** em vez de **Tema clássico**.
2. Clique em um dos 12 cartões e veja a **pré-visualização ao vivo**: o seu site de verdade, no computador ou no celular.
3. Abra **Ajustar a direção**, configure o que quiser e salve: nada é publicado antes disso.

- **5 cores**: fundo, faixas e cartões, texto, texto secundário, destaque dos botões e dos links.
- **Fonte dos títulos**: 18 fontes escolhidas pela personalidade, ou uma fonte do sistema. **Fonte do texto**: uma fonte do sistema, sem download.
- **Caixa dos títulos**, **tamanho dos títulos**, **cantos** (retos, suavizados, arredondados) e **espaçamento** (compacto, normal, arejado).
- **Cartões** com borda fina, em cor sólida ou com sombra projetada, e **banner de abertura** lado a lado, em cartaz, com imagem em tela cheia, editorial ou centralizado.
- **Diferenciais** em cartões, linhas ou colunas, **seções** com fundo liso ou em faixas de cor, e **ícones** desenhados no lugar dos emojis.

Cabeçalho, listas de artigos, logo, ícone, rodapé e CSS personalizado se configuram como nos temas clássicos do Éclair. Para voltar ao tema clássico, escolha **Tema clássico** e salve: as configurações dele esperam por você, intactas.

> **Sempre legível, sempre rápido** — Sejam quais forem as cores, o Éclair ajusta o texto a um contraste de **7:1** sobre o fundo, e o texto secundário, os links e os botões a 4,5:1, inclusive sobre os fundos tingidos. A fonte dos títulos (de 12 a 27 KB) é baixada uma única vez pelo seu servidor a partir do Fontsource (licença SIL Open Font License) e depois servida pelo seu site e pré-carregada: nenhum serviço de terceiros para os seus visitantes. Se a sua hospedagem bloqueia as conexões de saída, uma mensagem avisa você e uma fonte de reserva da mesma família a substitui.

## Como a IA imagina a sua direção?

![Configurações › Aparência: escolha entre direção de arte e tema clássico e, abaixo, os cartões das 12 direções](https://eclaircms.org/media/2026/11/pt-direction-settings.webp)
*Configurações › Aparência: direção de arte ou tema clássico e, abaixo, os 12 cartões.*

Quando o [assistente de IA](https://eclaircms.org/pt/documentacao/assistente-ia) está ativado, **Imagine minha direção com a IA** aparece abaixo dos cartões. Descreva a sua atividade, o seu público e o clima que você quer (“padaria orgânica de bairro em Curitiba, clientela familiar, acolhedora mas moderna”) e clique em **Propor 3 direções**.

A IA também lê a apresentação do seu site e o seu perfil editorial. Ela parte do mundo concreto da sua atividade, dá a cada proposta uma referência precisa e propõe três direções realmente diferentes, evitando a escolha padrão do seu segmento. As propostas entram no início dos cartões, marcadas com ✦: experimente-as na pré-visualização, ajuste e salve a que você preferir. A IA só escolhe entre os ajustes do Éclair e nunca escreve CSS. Custo estimado: cerca de US$ 0,03 com o Claude Sonnet 5.5, descontado do orçamento do assistente. O método foi adaptado do [Impeccable](https://github.com/pbakaus/impeccable), de Paul Bakaus.

## Quais são os 6 temas do Éclair, os clássicos?

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:

| Tema | Estilo | Para quem |
| --- | --- | --- |
| **Éclair** | Claro, moderno e versátil: o tema original | Todos os sites |
| **Editorial** | Uma revista: tipografia serifada, linhas finas, letra capitular, artigo em destaque | Blogs, veículos de comunicação, autores |
| **Ateliê** | Caloroso e artesanal: tons de creme e terracota, formas suaves | Artesãos, restaurantes, bem-estar |
| **Estúdio** | Portfólio minimalista: preto e branco, títulos grandes, imagens sem moldura | Fotógrafos, designers, agências |
| **Loja** | Pensado para vender: fotos quadradas, cabeçalho fixo, botões marcantes | Lojas, criadores |
| **Contraste** | Legibilidade máxima: texto grande, contrastes fortes, links sublinhados | Serviços públicos, associações, idosos |

Todos os temas exibem os mesmos blocos, o blog e a [loja leve](https://eclaircms.org/pt/documentacao/loja): 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.

![Configurações › Aparência do Éclair: os seis cards de temas, o tema Loja selecionado e a pré-visualização ao vivo da página inicial no computador](https://eclaircms.org/media/2026/11/pt-appearance-preview.webp)
*A pré-visualização ao vivo mostra o seu site de verdade com o tema escolhido; nada é publicado antes de você salvar.*

> **Anote as suas configurações antes de experimentar** — Escolher um tema substitui a cor, as fontes, o cabeçalho e as listas do formulário pelas configurações recomendadas dele. Se você as tinha personalizado, anote-as antes de experimentar outros temas. Enquanto você não clicar em Salvar, nada é alterado: basta sair da página para manter as configurações atuais.

## O que cada tema configura quando você o escolhe?

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

| Tema | Cor principal | Fontes (títulos / texto) | Cabeçalho | Listas |
| --- | --- | --- | --- | --- |
| Éclair | Violeta `#5b4cf0` | Sistema (moderna) | Logo à esquerda | Grade de cards |
| Editorial | Vermelho `#b42318` | Serifada elegante / Serifada moderna | Centralizado | Grade de cards |
| Ateliê | Terracota `#c2410c` | Humanista | Logo à esquerda | Grade de cards |
| Estúdio | Preto `#111111` | Neogrotesca | Logo à esquerda | Grade de cards |
| Loja | Verde-azulado `#0f766e` | Geométrica / Sistema (moderna) | Centralizado | Grade de cards |
| Contraste | Azul `#1d4ed8` | Sistema (moderna) | Logo à esquerda | Lista: imagem à esquerda |

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

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

| Configuração | O que você escolhe |
| --- | --- |
| **Cabeçalho** | “Logo à esquerda, menu à direita” ou “Centralizado: logo acima do menu” |
| **Listas de artigos e produtos** | “Grade de cards” ou “Lista: imagem à esquerda” |
| **Logo** | Um PNG ou um WebP com fundo transparente, com cerca de 400 px de largura |
| **Ícone do site (favicon)** | Uma imagem quadrada de pelo menos 512 px; sem ícone, é gerado um raio na sua cor |
| **Cor principal** | Qualquer cor: o contraste dos textos é ajustado automaticamente |
| **Fonte dos títulos** e **Fonte do texto** | Fontes do sistema: zero download, exibição instantânea |
| **Modo escuro** | “Automático (conforme o dispositivo do visitante)” ou “Sempre claro” |
| **Texto do rodapé** | O seu texto, e a opção **Mostrar “Feito com ⚡ Éclair”** |
| **CSS personalizado** | As suas próprias regras de estilo, no máximo 64 KB |

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](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) 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](https://eclaircms.org/pt/documentacao/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.
- **Com uma direção de arte**, só as regras úteis para a sua direção são inseridas, e a fonte dos títulos dela é pré-carregada com `font-display: optional`: nenhum deslocamento de layout, e o Lighthouse continua em 100.

## 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](https://eclaircms.org/pt/documentacao/atualizacoes) 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:

```css
.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](https://eclaircms.org/pt/documentacao/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 com os temas clássicos**: só fontes do sistema, que já estão no dispositivo do visitante. Uma direção de arte acrescenta uma única fonte de títulos, servida pelo seu site.
- **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?

| Sintoma | Solução |
| --- | --- |
| O site não mudou | A pré-visualização não salva nada: clique em **Salvar**. O CSS é embutido em cada página, não há arquivo antigo para atualizar. |
| “A loja” e “Um produto” não aparecem na pré-visualização | Eles só aparecem depois que a loja é aberta, e “Um produto” só com um produto publicado. |
| Uma regra do seu CSS personalizado é ignorada | Confira se ela não contém `<` nem `@import`, removidos ao salvar. Se continuar sem efeito, deixe-a mais específica: uma regra mais específica do tema vence. |
| “CSS personalizado longo demais: máximo de 64 KB.” | Agrupe ou enxugue as suas regras. |
| Algumas regras sumiram | Elas estão entre `/*dark*/` e `/*/dark*/`, e o modo escuro está em “Sempre claro”: é de propósito. |
| As suas alterações no `theme.css` sumiram | A atualização substituiu `app/`. Mova as suas regras para o CSS personalizado. |

O passo a passo original também está no [guia oficial do Éclair](https://github.com/Jacckisback/eclair-cms/blob/main/docs/GUIDE.pt-BR.md#temas), e o detalhe das versões 1.3.0 a 1.5.0 está no [changelog](https://eclaircms.org/pt/changelog).

## Perguntas sobre os temas

### Trocar de tema faz eu perder meus conteúdos ou meu SEO?

Não. Os temas do Éclair não mexem nos seus conteúdos nem no HTML das suas páginas: títulos, dados estruturados, velocidade e acessibilidade continuam iguais. Só a aparência muda.

### Posso voltar ao tema original?

Pode, a qualquer momento: escolha o card Éclair em Configurações › Aparência e salve. As configurações recomendadas dele voltam a valer, e o seu CSS personalizado continua no lugar.

### O modo escuro funciona com todos os temas?

Sim: ele se aplica automaticamente conforme o dispositivo do visitante, com cada um dos 6 temas. Para evitá-lo, deixe o **Modo escuro** em “Sempre claro”.

### Qual tema escolher para vender online?

O tema Loja foi pensado para vender: fotos quadradas, cabeçalho fixo, botões marcantes. Os outros temas também exibem a loja; o passo a passo está em [A loja leve](https://eclaircms.org/pt/documentacao/loja).

### Meu CSS personalizado sobrevive às atualizações?

Sim, desde o Éclair 1.5.0: ele fica guardado em `data/`, que a atualização não toca. Só as alterações feitas diretamente em `app/theme/` são substituídas.

### Uma direção de arte deixa meu site mais lento?

Não. Só as regras úteis para a sua direção são inseridas na página, e a fonte dos títulos dela, de 12 a 27 KB, é servida pelo seu site e pré-carregada. O Lighthouse continua em 100 nas quatro categorias.

### Posso voltar ao tema clássico depois de escolher uma direção?

Pode: escolha Tema clássico em Configurações › Aparência e salve. As configurações dele esperam por você, intactas, e as da sua direção também, se você voltar a ela.