--- title: "Elegir un tema y ajustar la apariencia" description: "Elegir un tema entre los 6 de Éclair, probarlo en directo en tu sitio y ajustar el color, las fuentes, el logo, la cabecera y el modo oscuro sin romper nada." url: "https://eclair.academy/es/rutas/intermedio/temas-apariencia" lang: "es" author: "Thierry Gustin" published: "2026-11-02" updated: "2026-11-02" --- # Elegir un tema y ajustar la apariencia > **Lo esencial** — Para elegir un tema, abre Ajustes › Apariencia, selecciona Tema clásico y después uno de los 6 temas (Éclair, Editorial, Taller, Estudio, Tienda, Contraste), y mira la vista previa en directo sobre tu sitio real. Luego ajusta el color principal, las fuentes, la cabecera, las listas, el logo y el modo oscuro, y guarda. Hasta entonces no se publica nada. Elegir un tema en Éclair lleva unos minutos y no rompe nada: los contenidos, el posicionamiento y la velocidad siguen idénticos, solo cambia la apariencia. Esta lección repasa los 6 temas incluidos, la vista previa en directo y cada ajuste de **Ajustes › Apariencia**: color, fuentes, logo, cabecera y modo oscuro. El hilo conductor: Atelier Nova, un taller de cerámica en Lyon. > **Antes de empezar** — Duración: 25 minutos. Requisitos previos: una cuenta de administrador ([los roles](https://eclair.academy/es/rutas/principiante/administracion)), tu logo y tu icono ya subidos a la [biblioteca de medios](https://eclair.academy/es/rutas/principiante/imagenes-mediateca) y algunas páginas publicadas para juzgar el resultado. ## Lo que sabrás hacer ### 🎨 Elegir el tema adecuado Comparar los 6 temas sobre tu propio sitio antes de guardar. ### 🎯 Afirmar tu identidad Color principal, fuentes, logo e icono, sin perder legibilidad. ### ⚡ Mantener un sitio rápido Entender por qué un tema solo pesa de 1,5 a 3 KB. ## ¿Tema clásico o dirección de arte? En la parte superior de **Ajustes › Apariencia**, la sección **Estilo del sitio** ofrece dos caminos. **Dirección de arte** aplica un universo completo: paleta, tipografía de títulos descargada y composiciones; la [lección sobre las direcciones](https://eclair.academy/es/rutas/intermedio/direcciones-artisticas) la explica a fondo. **Tema clásico** se describe como «Sobrio y versátil, fuentes del sistema: nada que descargar». Esta lección trata del tema clásico. Si pruebas una dirección, los ajustes de tu tema clásico quedan guardados: los recuperas intactos al volver. ## Los 6 temas incluidos | Tema | Estilo | Para quién | Ajustes que aplica | | --- | --- | --- | --- | | **Éclair** | Claro, moderno y versátil: el tema original | Todo tipo de sitios | Violeta, fuente Sistema, cabecera a la izquierda | | **Editorial** | Estilo revista: serifas, líneas finas, letra capitular, artículo destacado | Blogs, medios, autores | Rojo, títulos en Serifa elegante, texto en Serifa moderna, cabecera centrada | | **Taller** | Cálido y artesanal: tonos crema y terracota, formas suaves | Artesanos, restaurantes, bienestar | Terracota, fuente Humanista | | **Estudio** | Portfolio minimalista: blanco y negro, títulos grandes, imágenes sin marco | Fotógrafos, diseñadores, agencias | Negro, fuente Neogrotesca | | **Tienda** | Pensado para vender: fotos cuadradas, cabecera fija, botones bien visibles | Tiendas, creadores | Verde azulado, títulos en Geométrica, cabecera centrada | | **Contraste** | Máxima legibilidad: texto grande, contrastes fuertes, enlaces subrayados | Servicios públicos, asociaciones, personas mayores | Azul, fuente Sistema, artículos en lista | Al elegir un tema se aplican su color, sus fuentes y su disposición recomendadas: después puedes cambiarlo todo. Para Atelier Nova, el tema **Taller** se impone casi solo: tonos crema, esquinas redondeadas y sombras suaves, ideal para fotos de piezas de barro. **Estudio** sería la alternativa si las fotos están muy cuidadas: las pone en primer plano en un marco en blanco y negro. ![El mismo sitio mostrado con los 6 temas: Éclair, Editorial, Taller, Estudio, Tienda y Contraste](https://eclair.academy/media/2026/11/eclair-academy-themes-es.webp) *Un solo sitio, seis temas, el mismo HTML* ## ¿Cómo elegir un tema con la vista previa en directo? 1. Abre **Ajustes › Apariencia** y, en **Estilo del sitio**, elige **Tema clásico**. 2. Haz clic en la tarjeta de un tema: la **Vista previa en directo** se actualiza debajo de las tarjetas. 3. Con la lista desplegable que hay encima de la vista previa, pasa del inicio al blog, a un artículo, a la tienda o a un producto. También puedes hacer clic dentro de la vista previa: sus enlaces no salen de ella. 4. Alterna entre **Ordenador** y **Móvil** para juzgar los dos formatos. 5. Compara dos o tres temas en la misma página y haz clic en **Guardar**. No se publica nada mientras no guardes: tus visitantes no ven ninguna de tus pruebas. ![Ajustes › Apariencia: las tarjetas de los temas y la vista previa en directo del sitio en ordenador](https://eclair.academy/media/2026/11/eclair-academy-appearance-es.webp) *Cada prueba se muestra sobre tu sitio real* > **Juzga sobre una página real** — Prueba cada tema en tu página más completa, un artículo con imágenes, subtítulos y FAQ, en lugar de hacerlo solo en el inicio. Ahí es donde se notan las diferencias de tipografía. ## El color principal, con contraste garantizado El **Color principal** tiñe los botones, los enlaces, las viñetas de las listas, el resaltado y el contorno que marca el elemento seleccionado con el teclado. Elígelo con el selector o con una de las 8 muestras propuestas. Éclair cuida la legibilidad: el texto de los botones pasa a blanco o a casi negro según tu color, y el color de los enlaces se oscurece, o se aclara en modo oscuro, justo lo necesario para alcanzar un contraste de 4,5:1, el umbral de las normas WCAG para el texto normal. Así puedes elegir un amarillo sol o un rosa empolvado sin que tus enlaces dejen de leerse. Para Atelier Nova, la terracota del tema Taller (#c2410c) recuerda el color de la arcilla. > **El color se ajusta aquí, no con CSS** — No cambies el color principal con el CSS personalizado: el cálculo de contraste de los botones y los enlaces no lo seguiría. Usa siempre el ajuste **Color principal**. ## Fuentes del sistema, cero descargas **Fuente de los títulos** y **Fuente del texto** ofrecen 8 estilos cada una. Son fuentes que ya están instaladas en el dispositivo del visitante: el navegador toma la primera disponible de una lista, así que no se descarga nada y el texto aparece al instante. El resultado varía un poco entre un Mac, un PC y un móvil Android, pero el carácter se mantiene. | Estilo | Carácter | Fuentes utilizadas, por orden de preferencia | | --- | --- | --- | | Sistema (moderna) | Sin serifa, la del dispositivo | system-ui, Segoe UI, Roboto | | Neogrotesca | Sin serifa neutra | Inter, Roboto, Helvetica Neue, Arial | | Humanista | Sin serifa cálida | Seravek, Gill Sans Nova, Ubuntu, Calibri | | Geométrica | Formas redondas y regulares | Avenir, Montserrat, Corbel | | Redondeada | Terminaciones suavizadas | ui-rounded, Quicksand, Comfortaa | | Serifa moderna | Serifas nítidas, muy legible | Charter, Sitka Text, Cambria | | Serifa elegante | Serifas clásicas | Iowan Old Style, Palatino Linotype | | Máquina de escribir | Ancho fijo | Cascadia Code, Menlo, Consolas | Una regla sencilla: una sola familia para todo el sitio, o títulos con serifa y texto sin serifa. Atelier Nova mantiene Humanista en todas partes, como propone el tema Taller. ## Cabecera, listas, logo y pie de página - **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», más sobria para un blog. - **Logo**: PNG o WebP con fondo transparente, de unos 400 px de ancho. Se muestra a unos 38 px de alto: mejor una versión horizontal. - **Icono del sitio (favicon)**: imagen cuadrada de 512 px como mínimo. Sin icono, Éclair genera un rayo con tu color. - **Texto del pie de página**: una o dos líneas útiles, por ejemplo la dirección y el horario del taller. - **Mostrar «Creado con ⚡ Éclair»**: desactívalo si lo prefieres, la licencia MIT no lo exige. ## Modo oscuro: automático o siempre claro El ajuste **Modo oscuro** ofrece dos opciones. **Automático (según el dispositivo del visitante)** es la opción predeterminada: cada tema tiene su paleta oscura, que se aplica cuando el móvil o el ordenador del visitante está en modo oscuro, con enlaces recalculados para que sigan siendo legibles. **Siempre claro** muestra el sitio en claro para todo el mundo. Elige «Siempre claro» si tu identidad se basa en un fondo claro, o si tu logo es oscuro sobre fondo transparente: sobre un fondo oscuro, casi desaparecería. Para comprobarlo, pon tu propio dispositivo en modo oscuro y recarga tu sitio. > **¿Y un sitio siempre oscuro?** — El tema clásico no tiene la opción «siempre oscuro». Para un fondo oscuro permanente, elige una dirección de arte oscura, como Nocturno o Neón. Con una dirección, este ajuste desaparece: es ella la que fija el fondo claro u oscuro. ## ¿Por qué un tema solo pesa de 1,5 a 3 KB? Un tema de Éclair es solo una hoja de estilos de 1,5 a 3 KB que se añade a la hoja base. El HTML no cambia de un tema a otro: la velocidad, la accesibilidad, los datos estructurados y el posicionamiento siguen idénticos. Solo se inserta en la página el tema activo junto con el CSS base, es decir, de 17 a 23 KB en total y de 5 a 6 KB una vez comprimidos. Como las fuentes vienen del sistema, ninguna petición bloquea la visualización y la maquetación no salta durante la carga. Para ir más allá de un tema sin perder esa ligereza, tienes dos herramientas: una dirección de arte o unas pocas líneas de [CSS personalizado](https://eclair.academy/es/rutas/intermedio/css-personalizado). ## Para recordar - El tema solo afecta a la apariencia: los contenidos, las URL y las puntuaciones no cambian. - Antes de elegir un tema, pruébalo en la vista previa en directo, sobre una página real y en versión móvil. - Cualquier color principal sirve: Éclair ajusta los botones y los enlaces para mantener un contraste de 4,5:1. - Comprueba tu logo en modo oscuro, o elige «Siempre claro». - Para ir más allá de los 6 temas: dirección de arte o CSS personalizado. ## Para saber más - [Direcciones de arte y puntuación de diseño](https://eclair.academy/es/rutas/intermedio/direcciones-artisticas): 12 universos completos, con tipografías propias y composiciones. - [El CSS personalizado](https://eclair.academy/es/rutas/intermedio/css-personalizado): retocar un detalle del tema sin tocar sus archivos. - [Personalizar las plantillas del tema](https://eclair.academy/es/rutas/experto/personalizar-tema): para desarrolladores que quieren cambiar la estructura HTML. - Fuente oficial: [entender el contraste mínimo](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html), en el sitio del W3C (WCAG 2.2, en inglés). ## Preguntas frecuentes ### ¿Cambiar de tema me hace perder contenidos o posicionamiento? No. El HTML es el mismo de un tema a otro: solo cambian los colores, las fuentes y algunas maquetaciones. Tus URL, tus datos estructurados y tus puntuaciones siguen idénticos. ### ¿Puedo usar una fuente de Google Fonts con un tema clásico? No, el tema clásico solo usa las fuentes del sistema. Para una tipografía propia, recurre a una dirección de arte: ofrece 18 tipografías de títulos, que tu servidor descarga una sola vez y que después sirve tu propio sitio. ### ¿Por qué mis enlaces no tienen exactamente mi color principal? Si tu color es demasiado claro para un texto, Éclair lo oscurece, o lo aclara en modo oscuro, justo lo necesario para alcanzar un contraste de 4,5:1. Los botones, en cambio, conservan tu color exacto. ### ¿Cómo consigo un sitio siempre oscuro? El tema clásico solo ofrece «Automático» o «Siempre claro». Para un fondo oscuro permanente, elige una dirección de arte oscura como Nocturno o Neón.