Esta guía explica cómo configurar paletas de colores para el modo claro y oscuro para el tema de tu sitio Discourse. Cubre la configuración por tema, la asignación de paletas y las consideraciones de la interfaz de usuario.
Nivel de usuario requerido: Administrador
Configurar paletas de colores distintas para el modo claro y oscuro te permite presentar tu comunidad Discourse de una manera que se alinee con tu marca, mejore la accesibilidad y brinde a tus usuarios control sobre su experiencia de visualización. Las mejoras recientes en el sistema de temas de Discourse te permiten asignar una paleta clara y oscura preferida a cada tema, y permitir a los usuarios elegir su apariencia deseada.
Resumen
Esta guía cubre:
- Comprensión de las asignaciones de paletas para el modo claro y oscuro
- Asignación de paletas de colores claras y oscuras a un tema
- Gestión de las paletas de colores de tu sitio
- Comprensión de las opciones para el usuario
- Mejores prácticas para el uso de paletas y la accesibilidad
Comprensión de las asignaciones de paletas para el modo claro y oscuro
Los temas de Discourse admiten la asignación explícita de una paleta de colores “clara” y una “oscura”. De esta manera, cualquier tema puede cambiar automáticamente según la configuración del sistema del usuario, o permitir al usuario elegir un modo preferido, manteniendo los colores de marca que prefieras.
Asignación de paletas claras y oscuras a un tema
Para configurar las paletas de colores de tu tema:
-
Ve a Administración > Apariencia > Temas y componentes (
/admin/customize/themes) -
Haz clic en el tema que deseas editar.
-
En la configuración del tema, localiza la sección Paletas de colores.
-
Tanto para Paleta de colores como para Paleta de colores oscura, selecciona la paleta que deseas utilizar.
-
Haz clic en Guardar en la parte inferior de la página de configuración del tema.
Esto asegura que el tema de tu sitio utilizará la paleta correcta tanto para los usuarios del modo claro como del oscuro. Ten en cuenta que los miembros aún pueden seleccionar otras paletas seleccionables por el usuario, pero las que establezcas aquí serán las predeterminadas.
Gestión de tus paletas de colores
Todas las paletas de colores disponibles (y sus asignaciones vinculadas) se pueden administrar de forma centralizada:
-
Navega a Administración > Apariencia > Paletas de colores (
/admin/customize/colors) -
Aquí puedes editar, agregar o eliminar paletas, marcarlas como seleccionables por el usuario y asignarlas como las paletas claras y oscuras predeterminadas de tu tema.
Opciones para el usuario
Preferencias del usuario
Los usuarios pueden elegir su modo preferido para ver el sitio:
-
Ve a Preferencias del usuario > Interfaz
-
En la sección “Paleta de colores”, los miembros pueden seleccionar sus paletas claras y oscuras preferidas, así como el modo que desean utilizar: Claro, Oscuro, Automático:
Si se selecciona “Automático”, Discourse se adaptará a la preferencia del esquema de color del sistema del usuario.
Mejores prácticas
- Consistencia de marca: Personaliza las paletas para que coincidan con tu marca en ambos modos. Mantén los colores principales consistentes, pero ajústalos para obtener contraste y legibilidad.
- Accesibilidad: Asegúrate de que las relaciones de contraste de color cumplan con las pautas de WCAG (esta herramienta puede ayudar), especialmente en el modo oscuro, donde algunos colores pueden parecer apagados.
- Prueba en varios dispositivos: Comprueba la apariencia en ambos modos, en diferentes dispositivos y navegadores.
- Activos del logotipo: Puedes cargar logotipos separados para los modos claro y oscuro en Administración > Apariencia > Logotipos.
- Mantén el recuento de paletas manejable: Ofrece solo las paletas que los usuarios necesitan o que consideres razonables.
Preguntas frecuentes
¿Puedo tener más de una paleta oscura o clara?
Sí, pero se recomienda mantener una paleta principal para cada una para reducir la confusión. Asigna solo las paletas principales a los temas para la selección del usuario.
¿Puedo obligar a todos a usar solo el modo claro (o solo oscuro)?
Puedes hacerlo estableciendo la misma paleta como las paletas predeterminadas clara y oscura, y asegurándote de que no haya otras paletas seleccionables por el usuario.
¿Los componentes de temas personalizados ajustarán automáticamente los colores?
Si utilizan las variables de color CSS de Discourse (por ejemplo, --primary, --secondary), heredarán la paleta. Es mejor evitar colores codificados de forma rígida en CSS personalizado.
¿El cambio de paleta cambia todo el tema o solo los colores?
Solo las variables de color cambian. La estructura, las fuentes y el diseño permanecen iguales al cambiar las paletas de colores.