Temas del CMS: modo oscuro, accesibilidad verificada

· Themes

AliothPress incluye 15 temas integrados, cada uno con modo oscuro y claro, y obtiene 100/100 en las auditorías de accesibilidad de Google PageSpeed Insights en los 15 y en ambos modos. Los visitantes cambian de modo con un clic, el dueño del sitio fija el predeterminado o bloquea un solo modo, y un campo de CSS personalizado ajusta cualquier tema sin tocar sus archivos. Los temas propios se instalan desde un archivo ZIP y sobreviven a las actualizaciones del núcleo, mientras que los temas integrados son restaurados por las actualizaciones y no pueden perderse.

15 temas integrados

La colección integrada abarca estéticas corporativas, editoriales, botánicas, cósmicas y neón: Stellar Origin (el predeterminado), Corporate Clean, Editorial Press, Amber Blossom, Crimson Velvet, Emerald Forest, Frozen Moss, Handmade Story, Midnight Botanist, Nebula Rose, Neon Launch, Ocean Whispers, Oceanic Depth, Solar Flare y Volcanic Ash. Cambiar de tema es un clic en el panel y se aplica al instante en todo el sitio público, páginas del builder incluidas: los bloques se renderizan con los tokens de diseño del tema activo, así que un cambio de tema lo reestiliza todo a la vez.

Modo oscuro y claro en cada tema

Cada tema define una paleta completa oscura y otra clara. Un conmutador de sol y luna en la cabecera del sitio deja que cada visitante elija su modo, y la elección persiste en su navegador. El dueño controla el comportamiento predeterminado: seguir la preferencia del sistema operativo del visitante, empezar en claro, empezar en oscuro o bloquear el sitio en un solo modo, lo que oculta el conmutador por completo. Cuando el dueño cambia los ajustes del tema, las preferencias guardadas de los visitantes se restablecen limpiamente, así que nadie se queda atascado en una elección obsoleta.

Accesibilidad verificada

Los 15 temas obtienen 100/100 en la auditoría de accesibilidad de Google PageSpeed Insights, en modo oscuro y en modo claro. La puntuación descansa en cómo está construido el marcado:

  • HTML semántico en todo el sitio: puntos de referencia de navegación, etiquetas ARIA en los controles interactivos, texto solo para lectores de pantalla donde los iconos van solos.
  • Los acordeones usan el elemento nativo details, así que funcionan con teclado y tecnología de asistencia sin JavaScript.
  • Las presentaciones responden a las flechas del teclado, y los elementos en movimiento, como presentaciones y cintas de logos, respetan el ajuste prefers-reduced-motion del visitante.
  • Las paletas de color de ambos modos están construidas con contraste suficiente.

La accesibilidad aquí es una propiedad de las páginas renderizadas, verificada por tema y por modo.

CSS personalizado sobre el tema activo

Un campo de CSS personalizado en los ajustes de diseño acepta tus propias reglas, aplicadas sobre el tema activo. Ajusta colores, espaciados o tipografía sin editar los archivos del tema, lo que mantiene la personalización intacta a través de cambios de tema y actualizaciones del núcleo. Rigen dos reglas de seguridad: url() y @import se rechazan, así que los estilos propios no pueden cargar recursos externos, preservando la naturaleza autoalojada y sin terceros del sitio público. Y la salida se sanea contra escapes de la etiqueta style antes de renderizarse.

Temas propios desde un ZIP

Más allá de la colección integrada, AliothPress instala temas propios desde un archivo ZIP subido en el panel de administración. Un tema propio es un ciudadano de primera: aparece en la lista de temas, admite ambos modos de color y sobrevive a las actualizaciones del núcleo. Los temas integrados están protegidos de otra manera: una actualización del núcleo restaura sus archivos, así que no pueden perderse ni romperse por accidente. Cómo construir tu propio tema se trata en una guía aparte sobre la creación de temas para AliothPress.

Datos clave sobre los temas y la accesibilidad de AliothPress

15 temas integrados con paletas completas oscura y clara, un conmutador para el visitante con predeterminado y bloqueo controlados por el dueño, accesibilidad 100/100 en PageSpeed en todos los temas y ambos modos, soporte de prefers-reduced-motion y teclado en los bloques interactivos, un campo de CSS personalizado saneado que no puede cargar recursos externos, e instalación de temas desde ZIP con comportamiento seguro ante actualizaciones en ambos lados.

Preguntas frecuentes

¿Cuántos temas incluye AliothPress?
15 temas integrados, cada uno con paletas completas de modo oscuro y claro. El tema predeterminado es Stellar Origin, y el cambio se aplica al instante a todo el sitio, incluidas las páginas del builder.
¿Los visitantes pueden elegir modo oscuro o claro?
Sí, con un conmutador en la cabecera del sitio, y la elección se guarda en su navegador. El dueño fija el predeterminado (sistema, claro u oscuro) o bloquea un modo, lo que oculta el conmutador.
¿Los temas de AliothPress son accesibles?
Sí. Los 15 temas obtienen 100/100 en la auditoría de accesibilidad de Google PageSpeed Insights en ambos modos, con marcado semántico, soporte de teclado y manejo de prefers-reduced-motion.
¿Se puede personalizar un tema sin editar sus archivos?
Sí. El campo de CSS personalizado aplica tus reglas sobre el tema activo y sobrevive a cambios de tema y actualizaciones. Los recursos externos mediante url() o @import se rechazan por diseño.
¿Puedo instalar mi propio tema?
Sí, desde un archivo ZIP en el panel de administración. Los temas propios admiten ambos modos de color y sobreviven a las actualizaciones del núcleo. Una guía aparte explica cómo construir uno.