Themes and appearance

The 6 Éclair themes change your site’s look in one click: color, fonts, header and list layout. 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.

What are the 6 Éclair themes?

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

Every theme displays the same blocks, the blog and the lightweight 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.

What does each theme set when you choose it?

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

What other appearance settings can you change?

Still in Settings › Appearance, below the preview:

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 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 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.

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 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:

.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 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 in the settings: only system fonts, already installed on the visitor’s device.
• Custom CSS imports nothing: without @import, it can’t load another stylesheet.

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

The original instructions are also in Éclair’s official guide, and the details of versions 1.3.0 to 1.5.0 are in the changelog.