Temas y apariencia

Los 6 temas de Éclair cambian el aspecto de tu sitio con un solo clic: color, fuentes, cabecera y presentación de las listas. Puedes probarlos en tu sitio real con la vista previa en directo, en ordenador o en móvil, y no se publica nada hasta que guardes. Tus contenidos, tu velocidad y tu posicionamiento, en cambio, no se mueven.

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

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:

Todos los temas muestran los mismos bloques, el blog y la tienda ligera: 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.

¿Qué ajusta cada tema al elegirlo?

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

¿Qué otros ajustes de apariencia puedes modificar?

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

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

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

.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. 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 en los ajustes: solo fuentes del sistema, que ya están en el dispositivo del visitante.
• El CSS personalizado no importa nada: sin @import, no puede cargar otra hoja de estilos.

¿Qué hacer si la apariencia no cambia?

Las instrucciones originales también están en la guía oficial de Éclair, y el detalle de las versiones 1.3.0 a 1.5.0, en el changelog.