---
title: "Temas y apariencia"
description: "Los temas de Éclair y las 12 direcciones de arte cambian el aspecto de tu sitio, con vista previa en directo y sin tocar el HTML ni el posicionamiento."
url: "https://eclaircms.org/es/documentacion/temas"
lang: "es"
author: "Thierry Gustin"
published: "2026-10-30"
updated: "2026-11-01"
---

# Temas y apariencia

> **Lo esencial** — Éclair ofrece 12 direcciones de arte, que cambian todo el universo del sitio (paleta, tipografía de los títulos, banner, puntos fuertes, iconos), y 6 temas clásicos. Puedes probarlos en Ajustes › Apariencia con una vista previa en directo de tu sitio real, y no se publica nada hasta que guardes. La IA puede imaginar tres direcciones a partir de tu actividad. Los contrastes están garantizados, la tipografía la sirve tu propio sitio y el HTML no cambia: la velocidad y el posicionamiento quedan intactos.

Los temas de Éclair cambian el aspecto de tu sitio con un clic: color, fuentes, cabecera y presentación de las listas. Desde la 1.8, las 12 direcciones de arte van más allá y cambian todo su universo. Pruébalos en tu sitio real con la vista previa en directo, en ordenador o en móvil: no se publica nada hasta que guardes. Tus contenidos, tu velocidad y tu posicionamiento siguen intactos.

![El mismo sitio de un ceramista mostrado con los 6 temas de Éclair: Éclair, Editorial, Taller, Estudio, Tienda y Contraste](https://eclaircms.org/media/2026/11/es-themes.webp)
*Un solo sitio, seis estilos: solo cambia el tema; el contenido y el HTML siguen siendo los mismos.*

## ¿Qué es una dirección de arte?

Desde Éclair 1.8, una **dirección de arte** va más allá de los temas de Éclair clásicos: cambia todo el universo del sitio a partir de una idea concreta (la ciudad de noche, el taller de cerámica, el diario de la mañana). La paleta, la tipografía de los títulos, el tamaño de los títulos, las esquinas, el espaciado, la composición del banner, la maquetación de los puntos fuertes, las franjas de color y los iconos cambian a la vez.

![El mismo sitio de cerámica con seis direcciones de arte: Nocturno, Galería, Arcilla, Riviera, Recreo y Prensa](https://eclaircms.org/media/2026/11/es-art-directions.webp)
*El mismo sitio en seis de las doce direcciones de arte.*

| Dirección | Universo | Tipografía de los títulos |
| --- | --- | --- |
| **Nocturno** | La ciudad de noche: azul profundo, luz ámbar | Big Shoulders Display, en mayúsculas |
| **Galería** | Paredes blancas, cartelas negras, un rojo de señalética | Familjen Grotesk |
| **Arcilla** | El taller de cerámica: arena, terracota, formas suaves | Young Serif |
| **Botánica** | El herbario y el invernadero: verde profundo, papel salvia | DM Serif Display |
| **Cartel** | El cartel suizo: negro sobre blanco roto, naranja vivo | Archivo Black, en mayúsculas |
| **Riviera** | La orilla del mar: azul marino, cielo pálido, coral | Gloock |
| **Despacho** | El papel con membrete: tinta azul marino, burdeos, filetes finos | Libre Caslon Display |
| **Neón** | La pantalla creativa de noche: casi negro, verde lima | Unbounded |
| **Dulzura** | La consulta de cuidados: rosa empolvado, ciruela, mucho aire | Cormorant Garamond |
| **Obra** | Hormigón, amarillo de seguridad, señalética condensada | Barlow Condensed, en mayúsculas |
| **Recreo** | El patio del colegio: azul cielo, rojo tomate, letras redondas | Fredoka |
| **Prensa** | El diario de la mañana: papel de periódico, rojo de portada | Newsreader |

## ¿Cómo elegir y ajustar una dirección de arte?

1. En **Ajustes › Apariencia**, elige **Dirección de arte** en lugar de **Tema clásico**.
2. Haz clic en una de las 12 tarjetas y mira la **vista previa en directo**: tu sitio real, en ordenador o en móvil.
3. Abre **Ajustar la dirección**, cambia lo que quieras y guarda: no se publica nada antes.

- **5 colores**: fondo, franjas y tarjetas, texto, texto secundario, acento de los botones y los enlaces.
- **Fuente de los títulos**: 18 tipografías elegidas por su personalidad, o una fuente del sistema. **Fuente del texto**: una fuente del sistema, sin descarga.
- **Mayúsculas**, **tamaño de los títulos**, **esquinas** (rectas, suavizadas, redondas) y **espaciado** (compacto, normal, amplio).
- **Tarjetas** con borde fino, de color plano o con sombra, y **banner de inicio** con texto e imagen lado a lado, en cartel, a sangre, editorial o centrado.
- **Puntos fuertes** en tarjetas, filas o columnas, **secciones** lisas o en franjas de color, e **iconos** dibujados en lugar de los emojis.

La cabecera, las listas de artículos, el logo, el icono, el pie de página y el CSS personalizado se ajustan como con los temas de Éclair clásicos. Para volver al tema clásico, elige **Tema clásico** y guarda: sus ajustes te esperan, intactos.

> **Siempre legible, siempre rápido** — Sean cuales sean los colores, Éclair ajusta el texto a un contraste de **7:1** sobre el fondo, y el texto secundario, los enlaces y los botones a 4,5:1, también sobre los fondos tintados. La tipografía de los títulos (de 12 a 27 KB) la descarga tu servidor una sola vez desde Fontsource (licencia SIL Open Font License) y después la sirve tu propio sitio, precargada: ningún servicio de terceros para tus visitantes. Si tu proveedor de hosting bloquea las conexiones salientes, un mensaje te avisa y una fuente de reserva de la misma familia la sustituye.

## ¿Cómo imagina la IA tu dirección?

![Ajustes › Apariencia: elección entre dirección de arte y tema clásico y, debajo, las tarjetas de las 12 direcciones](https://eclaircms.org/media/2026/11/es-direction-settings.webp)
*Ajustes › Apariencia: dirección de arte o tema clásico y, debajo, las 12 tarjetas.*

Cuando el [asistente IA](https://eclaircms.org/es/documentacion/asistente-ia) está activado, **Imagina mi dirección con la IA** aparece debajo de las tarjetas. Describe tu actividad, tu público y el ambiente que buscas («panadería ecológica de barrio en Valencia, clientela familiar, cálido pero moderno») y haz clic en **Proponer 3 direcciones**.

La IA lee también la presentación de tu sitio y tu perfil editorial. Parte del mundo concreto de tu actividad, da a cada propuesta una referencia precisa y propone tres direcciones realmente distintas, evitando la elección por defecto de tu sector. Las propuestas se añaden al principio de las tarjetas, marcadas con ✦: pruébalas en la vista previa, ajústalas y guarda la que te guste. La IA solo elige entre los ajustes de Éclair y nunca escribe CSS. Coste orientativo: unos 0,03 $ con Claude Sonnet 5.5, que se descuentan del presupuesto del asistente. El método está adaptado de [Impeccable](https://github.com/pbakaus/impeccable), de Paul Bakaus.

## ¿Cuáles son los 6 temas de Éclair clásicos?

Los temas de Éclair vienen incluidos con el CMS desde la versión 1.3.0. Cada uno tiene su carácter y su público:

| Tema | Estilo | Para quién |
| --- | --- | --- |
| **Éclair** | Claro, moderno y versátil: el tema original | Todo tipo de sitios |
| **Editorial** | Estilo revista: tipografía con serifa, líneas finas, letra capitular, artículo destacado | Blogs, medios, autores |
| **Taller** | Cálido y artesanal: tonos crema y terracota, formas suaves | Artesanos, restaurantes, bienestar |
| **Estudio** | Portfolio minimalista: blanco y negro, títulos grandes, imágenes sin marco | Fotógrafos, diseñadores, agencias |
| **Tienda** | Pensado para vender: fotos cuadradas, cabecera fija, botones bien visibles | Tiendas, creadores |
| **Contraste** | Máxima legibilidad: texto grande, contrastes fuertes, enlaces subrayados | Servicios públicos, asociaciones, personas mayores |

Todos los temas muestran los mismos bloques, el blog y la [tienda ligera](https://eclaircms.org/es/documentacion/tienda): elige el que se parezca a tu actividad, no el que «contiene» una función.

## ¿Cómo se cambia de tema?

Bastan cinco pasos, vista previa incluida:

1. Abre **Ajustes › Apariencia**.
2. En **Tema**, haz clic en la tarjeta que te guste. Su color, sus fuentes, su cabecera y la presentación de sus listas se aplican al instante en el formulario.
3. Debajo de **Vista previa en directo**, elige la página que se muestra (Inicio, Blog, Un artículo, La tienda o Un producto) y pasa de **Ordenador** a **Móvil**. Puedes hacer clic dentro de la vista previa: los enlaces se quedan en ella.
4. Ajusta lo que quieras (color principal, fuentes, cabecera, listas, modo oscuro): la vista previa sigue cada cambio.
5. Haz clic en **Guardar**. La caché de las páginas se vacía automáticamente: tu sitio cambia al instante.

![Ajustes › Apariencia de Éclair: las seis tarjetas de temas, el tema Tienda seleccionado y la vista previa en directo de la página de inicio en ordenador](https://eclaircms.org/media/2026/11/es-appearance-preview.webp)
*La vista previa en directo muestra tu sitio real con el tema elegido; no se publica nada hasta que guardes.*

> **Anota tus ajustes antes de probar** — Al elegir un tema, el color, las fuentes, la cabecera y las listas del formulario se sustituyen por sus ajustes recomendados. Si los habías personalizado, anótalos antes de probar otros temas. Mientras no hayas hecho clic en Guardar, no se modifica nada: sal de la página y conservarás tus ajustes actuales.

## ¿Qué ajusta cada tema al elegirlo?

Estos son los ajustes recomendados que aplica cada tema; después, todos se pueden modificar:

| Tema | Color principal | Fuentes (títulos / texto) | Cabecera | Listas |
| --- | --- | --- | --- | --- |
| Éclair | Violeta `#5b4cf0` | Sistema (moderna) | Logo a la izquierda | Cuadrícula de tarjetas |
| Editorial | Rojo `#b42318` | Serifa elegante / Serifa moderna | Centrada | Cuadrícula de tarjetas |
| Taller | Terracota `#c2410c` | Humanista | Logo a la izquierda | Cuadrícula de tarjetas |
| Estudio | Negro `#111111` | Neogrotesca | Logo a la izquierda | Cuadrícula de tarjetas |
| Tienda | Verde azulado `#0f766e` | Geométrica / Sistema (moderna) | Centrada | Cuadrícula de tarjetas |
| Contraste | Azul `#1d4ed8` | Sistema (moderna) | Logo a la izquierda | Lista: imagen a la izquierda |

## ¿Qué otros ajustes de apariencia puedes modificar?

También en **Ajustes › Apariencia**, debajo de la vista previa:

| Ajuste | Lo que eliges |
| --- | --- |
| **Cabecera** | «Logo a la izquierda, menú a la derecha» o «Centrado: logo encima del menú» |
| **Listas de artículos y productos** | «Cuadrícula de tarjetas» o «Lista: imagen a la izquierda» |
| **Logo** | Un PNG o un WebP con fondo transparente, de unos 400 px de ancho |
| **Icono del sitio (favicon)** | Una imagen cuadrada de al menos 512 px; sin icono, se genera un rayo con tu color |
| **Color principal** | Cualquier color: el contraste de los textos se ajusta automáticamente |
| **Fuente de los títulos** y **Fuente del texto** | Fuentes del sistema: cero descargas, visualización instantánea |
| **Modo oscuro** | «Automático (según el dispositivo del visitante)» o «Siempre claro» |
| **Texto del pie de página** | Tu texto, y la opción **Mostrar «Creado con ⚡ Éclair»** |
| **CSS personalizado** | Tus propias reglas de estilo, 64 KB como máximo |

Para el color principal, Éclair busca un contraste de al menos 4,5:1 entre los enlaces y el fondo, el umbral del [criterio WCAG 1.4.3](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) para el texto normal. Si tu color no lo alcanza, los enlaces usan una versión más oscura (más clara en modo oscuro), y el texto de los botones pasa a blanco o a negro, según lo que se lea mejor.

## ¿Por qué un tema no ralentiza tu sitio?

Porque cada tema es solo una **hoja de estilos de 1,5 a 3 KB** que se añade a la de base. El tema Éclair, por su parte, no añade nada: es el estilo de base.

- **El HTML no cambia** de un tema a otro: la velocidad, la accesibilidad, los datos estructurados y el [posicionamiento](https://eclaircms.org/es/documentacion/seo) siguen siendo idénticos.
- **Solo se inserta el tema activo** en la página, junto con el resto del CSS: no hay ningún archivo más que descargar.
- **El modo oscuro automático** funciona con cada uno de los 6 temas.
- **Los estilos de la tienda** solo se insertan cuando está abierta: una web corporativa nunca los carga.
- **Con una dirección de arte**, solo se insertan las reglas que necesita tu dirección, y su tipografía de los títulos se precarga con `font-display: optional`: ningún salto de diseño, y Lighthouse sigue en 100.

## ¿Cómo añadir tu propio CSS?

Para ir más allá del tema (el color de un botón, los espaciados, el estilo de un bloque), pega tus reglas en **Ajustes › Apariencia › CSS personalizado** y guarda.

- **Tienen prioridad sobre el tema**: se añaden después de él en cada página.
- **Sobreviven a las actualizaciones** desde Éclair 1.5.0: se guardan con tus datos, en `data/`, que la [actualización](https://eclaircms.org/es/documentacion/actualizaciones) no toca.
- **Los marcadores del modo oscuro** funcionan: las reglas situadas entre `/*dark*/` y `/*/dark*/` desaparecen cuando el modo oscuro está en «Siempre claro».
- **Por seguridad**, se eliminan el carácter `<`, las reglas `@import` y los caracteres de control, y el campo acepta 64 KB como máximo.

Por ejemplo, para botones con las esquinas ligeramente redondeadas y un pie de página más oscuro en modo oscuro:

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

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

## ¿Qué no hacen los temas?

- **No cambian la estructura de las páginas.** Para mover un elemento o añadir una zona, hay que modificar las plantillas PHP de `app/theme/`, como explica la página [Para desarrolladores](https://eclaircms.org/es/documentacion/desarrolladores). Una actualización las sustituye: guarda una copia de tus archivos.
- **No hay catálogo de temas que descargar ni plugins**: los 6 temas vienen incluidos con Éclair. La ausencia de plugins es una decisión deliberada, por la velocidad y la seguridad.
- **No hay fuentes web con los temas clásicos**: solo fuentes del sistema, que ya están en el dispositivo del visitante. Una dirección de arte añade una sola tipografía de títulos, servida por tu sitio.
- **El CSS personalizado no importa nada**: sin `@import`, no puede cargar otra hoja de estilos.

## ¿Qué hacer si la apariencia no cambia?

| Síntoma | Solución |
| --- | --- |
| El sitio no ha cambiado | La vista previa no guarda nada: haz clic en **Guardar**. El CSS está integrado en cada página, así que no hay ningún archivo antiguo que refrescar. |
| «La tienda» y «Un producto» no aparecen en la vista previa | Solo aparecen cuando la tienda está abierta, y «Un producto» únicamente si hay un producto publicado. |
| Se ignora una regla de tu CSS personalizado | Comprueba que no contenga ni `<` ni `@import`, que se eliminan al guardar. Si sigue sin surtir efecto, hazla más específica: una regla más específica del tema tiene prioridad. |
| «CSS personalizado demasiado largo: 64 KB como máximo.» | Agrupa o aligera tus reglas. |
| Desaparecen algunas reglas | Están entre `/*dark*/` y `/*/dark*/`, y el modo oscuro está en «Siempre claro»: es lo previsto. |
| Tus retoques de `theme.css` han desaparecido | La actualización ha sustituido `app/`. Traslada tus reglas al CSS personalizado. |

Las instrucciones originales también están en la [guía oficial de Éclair](https://github.com/Jacckisback/eclair-cms/blob/main/docs/GUIDE.es.md#temas), y el detalle de las versiones 1.3.0 a 1.5.0, en el [changelog](https://eclaircms.org/es/changelog).

## Preguntas sobre los temas

### ¿Cambiar de tema hace perder mis contenidos o mi posicionamiento?

No. Los temas de Éclair no tocan ni tus contenidos ni el HTML de tus páginas: títulos, datos estructurados, velocidad y accesibilidad siguen siendo idénticos. Solo cambia el aspecto.

### ¿Puedo volver al tema original?

Sí, en cualquier momento: elige la tarjeta Éclair en Ajustes › Apariencia y guarda. Sus ajustes recomendados se aplican de nuevo, y tu CSS personalizado se queda como está.

### ¿Funciona el modo oscuro con todos los temas?

Sí: se aplica automáticamente según el dispositivo del visitante, con cada uno de los 6 temas. Para evitarlo, pon el **Modo oscuro** en «Siempre claro».

### ¿Qué tema elegir para vender online?

El tema Tienda está pensado para vender: fotos cuadradas, cabecera fija, botones bien visibles. Los demás temas también muestran la tienda; las instrucciones están en [La tienda ligera](https://eclaircms.org/es/documentacion/tienda).

### ¿Sobrevive mi CSS personalizado a las actualizaciones?

Sí, desde Éclair 1.5.0: se guarda en `data/`, que la actualización no toca. Solo se sustituyen las modificaciones hechas directamente en `app/theme/`.

### ¿Una dirección de arte ralentiza mi sitio?

No. Solo se insertan en la página las reglas que necesita tu dirección, y su tipografía de los títulos, de 12 a 27 KB, la sirve tu propio sitio, precargada. Lighthouse sigue en 100 en las cuatro categorías.

### ¿Puedo volver al tema clásico después de elegir una dirección?

Sí: elige Tema clásico en Ajustes › Apariencia y guarda. Sus ajustes te esperan, intactos, y los de tu dirección también, si vuelves a ella.