---
title: "Themes and appearance"
description: "Éclair themes and the 12 art directions change your site’s look, with a live preview, without touching the HTML or your SEO."
url: "https://eclaircms.org/en/documentation/themes"
lang: "en"
author: "Thierry Gustin"
published: "2026-10-30"
updated: "2026-11-01"
---

# Themes and appearance

> **Key takeaways** — Éclair offers 12 art directions, which change the site’s entire visual world (palette, heading typeface, banner, features, icons), and 6 classic themes. You try them in Settings › Appearance with a live preview of your real site, and nothing is published until you save. The AI can imagine three directions based on your business. Contrast is guaranteed, the typeface is served by your site and the HTML doesn’t change: speed and SEO stay intact.

Éclair themes change your site’s look in one click: color, fonts, header and list layout. Since 1.8, the 12 art directions go further and change its entire visual world. You try them on your real site with the live preview, on desktop or mobile, and nothing is published until you save. Your content, your speed and your SEO stay exactly as they are.

![The same ceramicist’s site shown in Éclair’s 6 themes: Éclair, Editorial, Atelier, Studio, Shop and Contrast](https://eclaircms.org/media/2026/11/en-themes.webp)
*One site, six styles: only the theme changes; the content and the HTML stay the same.*

## What is an art direction?

Since Éclair 1.8, an **art direction** goes further than the classic Éclair themes: it changes the site’s entire visual world, starting from a concrete idea (the city at night, the ceramics studio, the morning paper). Palette, heading typeface, heading size, corners, spacing, banner composition, features layout, color bands and icons all change together.

![The same ceramics site in six art directions: Nocturne, Gallery, Clay, Riviera, Playtime and Press](https://eclaircms.org/media/2026/11/en-art-directions.webp)
*The same site in six of the twelve art directions.*

| Direction | Visual world | Heading typeface |
| --- | --- | --- |
| **Nocturne** | The city at night: deep blue, amber light | Big Shoulders Display, all caps |
| **Gallery** | White walls, black labels, a signage red | Familjen Grotesk |
| **Clay** | The ceramics studio: sand, terracotta, soft shapes | Young Serif |
| **Botanical** | The herbarium and the greenhouse: deep green, sage paper | DM Serif Display |
| **Poster** | The Swiss poster: black on off-white, bright orange | Archivo Black, all caps |
| **Riviera** | The seaside: navy blue, pale sky, coral | Gloock |
| **Chambers** | The letterhead: navy ink, burgundy, fine rules | Libre Caslon Display |
| **Neon** | The creative screen at night: near-black, lime green | Unbounded |
| **Gentle** | The treatment room: powder pink, plum, plenty of air | Cormorant Garamond |
| **Worksite** | Concrete, safety yellow, condensed signage | Barlow Condensed, all caps |
| **Playtime** | The schoolyard: sky blue, tomato red, round letters | Fredoka |
| **Press** | The morning paper: newsprint, front-page red | Newsreader |

## How do you choose and adjust an art direction?

1. In **Settings › Appearance**, choose **Art direction** instead of **Classic theme**.
2. Click one of the 12 cards and watch the **live preview**: your real site, on desktop or mobile.
3. Open **Adjust the direction**, set whatever you like, then save: nothing is published before that.

- **5 colors**: background, bands and cards, text, secondary text, accent for buttons and links.
- **Heading font**: 18 typefaces chosen for their personality, or a system font. **Body font**: a system font, nothing to download.
- **Heading case**, **heading size**, **corners** (square, softened, round) and **spacing** (compact, normal, airy).
- **Cards** with a thin border, a flat color or a drop shadow, and a **home banner** side by side, poster, full-bleed, editorial or centered.
- **Features** as cards, rows or columns, **sections** plain or in color bands, and line **icons** in place of emoji.

The header, post lists, logo, site icon, footer and custom CSS are set just as with the classic Éclair themes. To go back to the classic theme, choose **Classic theme** and save: its settings are waiting for you, untouched.

> **Always readable, always fast** — Whatever the colors, Éclair adjusts the text to a **7:1** contrast against the background, and the secondary text, links and buttons to 4.5:1, tinted backgrounds included. The heading typeface (12 to 27 KB) is downloaded only once by your server from Fontsource (SIL Open Font License), then served by your site and preloaded: no third-party service for your visitors. If your host blocks outgoing connections, a message lets you know and a fallback font from the same family takes its place.

## How does the AI imagine your direction?

![Settings › Appearance: the choice between art direction and classic theme, then the cards of the 12 directions](https://eclaircms.org/media/2026/11/en-direction-settings.webp)
*Settings › Appearance: art direction or classic theme, then the 12 cards.*

When the [AI assistant](https://eclaircms.org/en/documentation/ai-assistant) is turned on, **Imagine my direction with AI** appears below the cards. Describe your business, your audience and the mood you’re after (“organic neighborhood bakery in Lyon, family customers, warm but modern”), then click **Suggest 3 directions**.

The AI also reads your site’s description and your editorial profile. It starts from the concrete world of your business, gives each suggestion a precise reference and suggests three genuinely different directions, steering clear of your category’s default choice. The suggestions appear first among the cards, marked ✦: try them in the preview, adjust, then save the one you like. The AI only picks from Éclair’s settings and never writes CSS. Estimated cost: about $0.03 with Claude Sonnet 5.5, taken from the assistant’s budget. The method is adapted from [Impeccable](https://github.com/pbakaus/impeccable), by Paul Bakaus.

## What are the 6 classic Éclair themes?

Éclair themes have shipped with the CMS since version 1.3.0. Each one has its own personality and its own audience:

| Theme | Look and feel | Best for |
| --- | --- | --- |
| **Éclair** | Clean, modern and versatile: the original theme | Any kind of site |
| **Editorial** | Magazine style: serif typography, fine rules, drop cap, featured post | Blogs, media outlets, authors |
| **Atelier** | Warm and handcrafted: cream and terracotta tones, soft shapes | Craftspeople, restaurants, wellness |
| **Studio** | Minimalist portfolio: black and white, big headlines, frameless images | Photographers, designers, agencies |
| **Shop** | Built to sell: square photos, sticky header, bold buttons | Shops, makers |
| **Contrast** | Maximum readability: large text, strong contrast, underlined links | Public services, nonprofits, seniors |

Every theme displays the same blocks, the blog and the [lightweight shop](https://eclaircms.org/en/documentation/shop): pick the one that looks like your line of work, not the one that “includes” a feature.

## How do you change your theme?

Five steps are all it takes, preview included:

1. Open **Settings › Appearance**.
2. Under **Theme**, click the card you like. Its color, fonts, header and list layout are applied to the form right away.
3. Under **Live preview**, choose the page to display (Home, Blog, A post, The shop or A product), then switch from **Desktop** to **Mobile**. You can click around in the preview: links stay inside it.
4. Adjust whatever you like (main color, fonts, header, lists, dark mode): the preview follows every change.
5. Click **Save**. The page cache is cleared automatically: your site changes right away.

![Settings › Appearance in Éclair: the six theme cards, the Shop theme selected and the live preview of the home page on desktop](https://eclaircms.org/media/2026/11/en-appearance-preview.webp)
*The live preview shows your real site with the theme you chose; nothing is published until you save.*

> **Write down your settings before experimenting** — Choosing a theme replaces the color, fonts, header and lists in the form with its recommended settings. If you had customized them, write them down before trying other themes. Until you click Save, nothing changes: simply leave the page to keep your current settings.

## What does each theme set when you choose it?

Here are the recommended settings each theme applies, all of which you can change afterward:

| Theme | Main color | Fonts (headings / body) | Header | Lists |
| --- | --- | --- | --- | --- |
| Éclair | Violet `#5b4cf0` | System (modern) | Logo on the left | Card grid |
| Editorial | Red `#b42318` | Elegant serif / Modern serif | Centered | Card grid |
| Atelier | Terracotta `#c2410c` | Humanist | Logo on the left | Card grid |
| Studio | Black `#111111` | Neo-grotesque | Logo on the left | Card grid |
| Shop | Teal `#0f766e` | Geometric / System (modern) | Centered | Card grid |
| Contrast | Blue `#1d4ed8` | System (modern) | Logo on the left | List: image on the left |

## What other appearance settings can you change?

Still in **Settings › Appearance**, below the preview:

| Setting | What you choose |
| --- | --- |
| **Header** | “Logo on the left, menu on the right” or “Centered: logo above the menu” |
| **Post and product lists** | “Card grid” or “List: image on the left” |
| **Logo** | A PNG or WebP on a transparent background, about 400 px wide |
| **Site icon (favicon)** | A square image of at least 512 px; without an icon, a lightning bolt in your color is generated |
| **Main color** | Any color: text contrast is adjusted automatically |
| **Heading font** and **Body font** | System fonts: zero downloads, instant display |
| **Dark mode** | “Automatic (based on the visitor’s device)” or “Always light” |
| **Footer text** | Your own text, and the **Show “Powered by ⚡ Éclair”** option |
| **Custom CSS** | Your own style rules, 64 KB max |

For the main color, Éclair aims for a contrast ratio of at least 4.5:1 between links and the background, the threshold set by [WCAG success criterion 1.4.3](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) for body text. If your color falls short, links use a darker version of it (a lighter one in dark mode), and button text switches to white or black, whichever reads better.

## Why doesn’t a theme slow down your site?

Because each theme is just a **1.5 to 3 KB stylesheet**, added to the base one. The Éclair theme adds nothing at all: it is the base style.

- **The HTML doesn’t change** from one theme to another: speed, accessibility, structured data and [SEO](https://eclaircms.org/en/documentation/seo) stay exactly the same.
- **Only the active theme** is inlined in the page, along with the rest of the CSS: there’s no extra file to download.
- **Automatic dark mode** works with each of the 6 themes.
- **The shop’s styles** are only included when it’s open: a brochure site never loads them.
- **With an art direction**, only the rules your direction needs are inlined, and its heading typeface is preloaded with `font-display: optional`: no layout shift, and Lighthouse stays at 100.

## How do you add your own CSS?

To go further than the theme (a button color, spacing, the style of a block), paste your rules into **Settings › Appearance › Custom CSS**, then save.

- **They take precedence over the theme**: they’re added after it on every page.
- **They survive updates** since Éclair 1.5.0: they’re stored with your data, in `data/`, which [updates](https://eclaircms.org/en/documentation/updates) never touch.
- **Dark mode markers work**: rules placed between `/*dark*/` and `/*/dark*/` disappear when dark mode is set to “Always light”.
- **For security**, the `<` character, `@import` rules and control characters are removed, and the field accepts 64 KB at most.

For example, for buttons with slightly rounded corners and a darker footer in dark mode:

```css
.btn { border-radius: 6px; }

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

## What don’t themes do?

- **They don’t change the page structure.** To move an element or add an area, you need to edit the PHP templates in `app/theme/`, as explained on the [For developers](https://eclaircms.org/en/documentation/developers) page. An update replaces them: keep a copy of your files.
- **There’s no theme catalog to download, and no plugins**: the 6 themes come with Éclair. Having no plugins is a deliberate choice, for speed and security.
- **No web fonts with the classic themes**: only system fonts, already installed on the visitor’s device. An art direction adds a single heading typeface, served by your site.
- **Custom CSS imports nothing**: without `@import`, it can’t load another stylesheet.

## What should you do if the appearance doesn’t change?

| Symptom | Solution |
| --- | --- |
| The site hasn’t changed | The preview doesn’t save anything: click **Save**. The CSS is inlined in every page, so there’s no old file to refresh. |
| “The shop” and “A product” are missing from the preview | They only appear once the shop is open, and “A product” only when a product is published. |
| A rule in your custom CSS is ignored | Check that it contains neither `<` nor `@import`, which are removed when you save. If it still has no effect, make it more specific: a more specific rule in the theme wins. |
| “Custom CSS too long: 64 KB max.” | Combine or trim your rules. |
| Some rules disappear | They’re between `/*dark*/` and `/*/dark*/`, and dark mode is set to “Always light”: that’s intended. |
| Your edits to `theme.css` are gone | The update replaced `app/`. Move your rules into the custom CSS. |

The original instructions are also in [Éclair’s official guide](https://github.com/Jacckisback/eclair-cms/blob/main/docs/GUIDE.en.md#themes), and the details of versions 1.3.0 to 1.5.0 are in the [changelog](https://eclaircms.org/en/changelog).

## Questions about themes

### Will changing themes make me lose my content or my SEO?

No. Éclair themes don’t touch your content or the HTML of your pages: headings, structured data, speed and accessibility stay exactly the same. Only the appearance changes.

### Can I go back to the original theme?

Yes, at any time: choose the Éclair card in Settings › Appearance, then save. Its recommended settings are applied again, and your custom CSS stays in place.

### Does dark mode work with every theme?

Yes: it applies automatically based on the visitor’s device, with each of the 6 themes. To turn it off, set **Dark mode** to “Always light”.

### Which theme should I choose to sell online?

The Shop theme is built to sell: square photos, sticky header, bold buttons. The other themes display the shop too; the instructions are in [The lightweight shop](https://eclaircms.org/en/documentation/shop).

### Does my custom CSS survive updates?

Yes, since Éclair 1.5.0: it’s stored in `data/`, which updates never touch. Only changes made directly in `app/theme/` are replaced.

### Does an art direction slow down my site?

No. Only the rules your direction needs are inlined in the page, and its heading typeface, 12 to 27 KB, is served by your site and preloaded. Lighthouse stays at 100 in all four categories.

### Can I go back to the classic theme after choosing a direction?

Yes: choose Classic theme in Settings › Appearance and save. Its settings are waiting for you, untouched, and so are your direction’s if you switch back.