Esta guía explica cómo configurar las paletas de colores de modo claro y oscuro para el tema de su sitio de 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 le permite presentar su comunidad de Discourse de una manera que se alinee con su marca, mejore la accesibilidad y brinde a sus usuarios control sobre su experiencia de visualización. Las mejoras recientes en el sistema de temas de Discourse le permiten asignar una paleta clara y una oscura preferidas a cada tema, y permitir a los usuarios elegir la apariencia que deseen.
Resumen
Esta guía cubre:
- Comprensión de las asignaciones de paletas de modo claro y oscuro
- Asignación de paletas de colores claras y oscuras a un tema
- Administración de las paletas de colores de su sitio
- Habilitación del selector de modo de color para los usuarios
- Comprensión de las opciones visibles para el usuario
- Mejores prácticas para el uso de paletas y accesibilidad
Comprensión de las asignaciones de paletas de 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 que el usuario elija un modo preferido, manteniendo al mismo tiempo los colores de marca preferidos.
Asignación de paletas claras y oscuras a un tema
Para configurar las paletas de colores de su tema:
-
Vaya a Admin > Apariencia > Temas y componentes (
/admin/config/customize/themes) -
Haga clic en el tema que desea editar.
-
En la configuración del tema, localice la sección Paletas de colores.
-
Tanto para Paleta de colores como para Paleta de colores oscuros, seleccione la paleta que desea utilizar.
-
Haga clic en Guardar en la parte inferior de la página de configuración del tema.
Esto asegura que el tema de su sitio utilizará la paleta correcta tanto para los usuarios en modo claro como en modo oscuro. Tenga en cuenta que sus miembros aún pueden seleccionar otras paletas seleccionables por el usuario, pero las que configure aquí serán las predeterminadas.
Administración de sus paletas de colores
Todas las paletas de colores disponibles (y sus asignaciones vinculadas) se pueden administrar de forma centralizada:
-
Navegue a Admin > Apariencia > Paletas de colores (
/admin/config/colors) -
Aquí puede editar, agregar o eliminar paletas, marcarlas como seleccionables por el usuario y asignarlas como las paletas predeterminadas claras y oscuras de su tema.
Habilitación del selector de modo de color
Antes de que los usuarios puedan cambiar entre el modo claro y el oscuro en el sitio, debe habilitar la configuración del sitio interface_color_selector. Por defecto, está establecido en deshabilitado.
Para habilitarlo:
- Vaya a Admin > Configuración y busque
selector de color de interfaz. - Establézcalo en una de las siguientes opciones:
- Mostrar en el pie de página de la barra lateral: agrega un alternador claro/oscuro/automático en la parte inferior de la barra lateral
- Mostrar en la cabecera: agrega el alternador a la cabecera del sitio
Sin habilitar esta configuración, los usuarios no verán un alternador de modo de color en el sitio y el sitio seguirá automáticamente la preferencia de esquema de color del sistema de cada usuario.
Opciones visibles para el usuario
Preferencias del usuario
Los usuarios pueden elegir su modo preferido para ver el sitio:
-
Vaya 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 de esquema de color del sistema del usuario.
Mejores prácticas
- Consistencia de la marca: Personalice las paletas para que coincidan con su marca para ambos modos. Mantenga los colores principales consistentes, pero ajústelos para el contraste y la legibilidad.
- Accesibilidad: Asegúrese de que las proporciones 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.
- Pruebas en múltiples dispositivos: Verifique la apariencia en ambos modos, a través de dispositivos y navegadores.
- Activos del logotipo: Puede cargar logotipos separados para los modos claro y oscuro en Admin > Apariencia > Logotipo del sitio (
/admin/config/logo). - Mantenga el recuento de paletas manejable: Ofrezca solo las paletas que los usuarios necesitan o que considere 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. Asigne solo las paletas principales a los temas para la selección del usuario.
¿Puedo forzar a todos a usar solo el modo claro (o solo oscuro)?
Puede hacerlo estableciendo la misma paleta como las paletas predeterminadas clara y oscura, y asegurándose de que ninguna otra paleta sea seleccionable por el usuario.
¿Los componentes de tema personalizados se ajustarán automáticamente a los colores?
Si utilizan las variables de color CSS de Discourse (por ejemplo, --primary, --secondary), heredarán la paleta. Es mejor evitar los colores codificados en CSS personalizado.
¿El cambio de paleta cambia todo el tema o solo los colores?
Solo cambian las variables de color. La estructura, las fuentes y el diseño permanecen iguales al cambiar las paletas de colores.