Conmutación automática de esquema de color en Modo Oscuro

Ahora puedes configurar tu sitio Discourse para que cambie automáticamente los esquemas de color cuando el dispositivo del usuario esté en modo oscuro. Para una vista previa rápida, dirígete a la instancia try.discourse.org y activa y desactiva el modo oscuro de tu dispositivo para ver esta nueva función en acción. (Esta función no está habilitada en meta.)

Habilitar el modo oscuro automático

Para habilitar esta función en tu instancia, puedes seleccionar el esquema de color de modo oscuro en la configuración de tu sitio:

Una vez establecida esa configuración, puedes recargar tu sitio con un dispositivo en modo oscuro y deberías ver el esquema de color oscuro en uso.

Si el logotipo que funcionaba bien en un esquema claro no funciona tan bien en un fondo oscuro, ahora puedes cargar alternativas en la nueva configuración disponible en el núcleo.

Los archivos cargados en estas configuraciones reemplazarán la configuración regular con el mismo nombre si: a) el cambio automático de modo oscuro está habilitado y el dispositivo del usuario está en modo oscuro, o b) el usuario está usando un tema oscuro (incluso si no está en modo oscuro). Los sitios que anteriormente utilizaban https://meta.discourse.org/t/alternative-logos-for-dark-light-themes/88502 ahora pueden cambiar a usar la configuración del sitio del núcleo y eliminar ese componente.

Algunos usuarios podrían no querer cambiar automáticamente a un esquema de color oscuro cuando su navegador está en modo oscuro. Pueden deshabilitar esta función desmarcando la opción “Habilitar esquema de color de modo oscuro automático” en su pantalla Preferencias > Interfaz:


Selector de esquema de color seleccionado por el usuario

Para usar esta función, necesitas crear múltiples esquemas de color en tu sitio y marcarlos como seleccionables por los usuarios:

Una vez hecho esto, los usuarios deberían ver dos menús desplegables en la página Preferencias > Interfaz:

Consulta también Update themes and plugins to support automatic dark mode

56 Me gusta

Cuando llegue al canal Beta, podré probarlo. Técnicamente, no hay ninguna razón por la que no debería funcionar, siempre que ChromeOS (al igual que Android, iOS, macOS, etc.) respete la consulta de medios prefer-color-scheme.

Acabo de probarlo en un Chromebook del canal Beta. Funciona hasta cierto punto, pero aún no está pulido. Logré forzar el modo oscuro para todo el contenido web, incluidos los sitios de Discourse (lo probé en try.discourse.org). Sin embargo, parece que no puede alternar el contenido web al cambiar entre temas oscuros y claros en el sistema operativo. Además, al experimentar con ello, a menudo terminaba en un estado híbrido, donde partes de la interfaz usaban el modo claro y otras el modo oscuro.

Para quienes quieran probarlo, diríjanse a chrome://flags, busquen “Dark” (Oscuro) y habiliten “Dark/light mode of system UI” (Modo oscuro/claro de la interfaz del sistema) y “Force Dark Mode for Web Contents” (Forzar modo oscuro para contenido web).

11 Me gusta

Tenemos un tema claro y un tema oscuro. El tema oscuro muestra todo tal como queremos, incluidos los iconos de etiquetas y las vistas previas de los temas. Sin embargo, el esquema de color oscuro presenta varios problemas cuando se usan estos complementos. Me pregunto: ¿por qué no permitir establecer un tema predeterminado para el modo oscuro automático, en lugar de un esquema de color predeterminado? El tema parece permitir ajustes mucho mejores que el esquema de color.

4 Me gusta

Sospecho que te refieres a que hay algunos errores con el modo oscuro en el complemento de vistas previas de los temas. Si hago clic en el sitio de tu perfil de usuario, veo que algunos colores al pasar el cursor son incorrectos en modo oscuro. Quizás el complemento de vistas previas de los temas necesite una pequeña actualización para soportar mejor el modo oscuro (hay una guía para desarrolladores de complementos). De ser así, creo que vale la pena plantear el problema en el tema de ese complemento.

No podemos cambiar de tema al instante; los temas pueden tener código JavaScript personalizado y no es posible cambiar el código JavaScript sin recargar la página.

11 Me gusta

hm, no lo veo en la última versión.

2 Me gusta

Correcto, la casilla de verificación aparece solo si hay un único esquema oscuro disponible. Recientemente hemos introducido los esquemas compatibles con WCAG, lo que cambia la interfaz a los dos menús desplegables que ves en tu captura de pantalla bajo Esquemas de color.

Los usuarios que deseen desactivar el modo oscuro automático pueden hacer clic en el menú desplegable Modo oscuro y establecerlo en “Igual que el modo regular”.

9 Me gusta

¿Es posible que esta casilla venga desmarcada por defecto? La mayoría de los miembros de nuestra comunidad no están acostumbrados a navegar por el sitio en modo oscuro. Algunos usuarios que aún desearían tener la opción de modo oscuro automático.

7 Me gusta

¿Sigue siendo esta la mejor manera de probar esta función? No veo ningún cambio en el tema de try cuando lo visito desde mi Chromebook y activo/desactivo el modo oscuro. Incluso al recargar la página web no sucede nada. Estoy usando la última versión de ChromeOS. También intenté crear una cuenta de prueba y hacer lo mismo, pero sin cambios.

También revisé otros sitios que utilizo, incluidos los autoalojados y Teams, y no logro que cambien automáticamente según la configuración de modo oscuro de mi dispositivo.

ps: me encanta la función de screencast en ChromeOS. ¡Qué genial! :heart_eyes:

4 Me gusta

¿Así que funciona en Windows e iOS, pero no en ChromeOS? ¿Eso es lo que muestran las pruebas? Eso me sugiere que ChromeOS quizás necesite una actualización o no lo esté haciendo exactamente igual que los demás. ¿Alguna opinión, @pmusaraj?

7 Me gusta

Sí, esto es claramente un problema de ChromeOS; funciona correctamente en todos los sistemas operativos que admiten el modo oscuro, es decir, macOS, Windows, iOS, Android y varias distribuciones de Linux. Realmente no hay nada que podamos hacer al respecto.

11 Me gusta

¿Sería posible habilitarla ahora?

3 Me gusta

Hmm, buen punto, ¿cómo probamos esto @pmusaraj en Meta? He activado el “modo oscuro” para aplicaciones en Windows 10 y veo que Twitter (web/Chrome) cambia a oscuro, pero ¿y Meta?

2 Me gusta

Sí, esto aún no está habilitado en Meta porque tenemos muchos temas activados aquí, cada uno diseñado para funcionar con un esquema de color específico. Además, tenemos el selector de temas en el menú hamburguesa, lo cual no funciona bien con los esquemas de color.

5 Me gusta

Ah, ya veo. ¿Funciona con una instalación predeterminada de Discourse? ¿Puedo hacerlo funcionar con https://discourse.codinghorror.com/?

4 Me gusta

Sí, funciona en una instalación predeterminada. Por ejemplo, funciona en https://try.discourse.org.

En https://discourse.codinghorror.com/ es posible que debas cambiar la configuración (por defecto está establecida en Ninguno):

2 Me gusta

¡Ah, ya veo! Mi instalación es bastante antigua y solo tenía un esquema de color: claro. Agregué un nuevo esquema basado en el oscuro predeterminado y funcionó: ¡puedo confirmar que cambiar entre los esquemas de color oscuro y claro en la Configuración de Windows ahora afecta automáticamente a Discourse! :tada:

Pero, ¿esto funciona de inmediato en una instalación nueva de Discourse? ¿Esperemos que sí?

4 Me gusta

Sí, hay algunos esquemas de color agregados de forma predeterminada (Claro, Oscuro, WCAG Claro, WCAG Oscuro). Sin embargo, la configuración viene desactivada por defecto; los nuevos administradores deben buscarla para activarla.

4 Me gusta

¿Deberíamos establecer como objetivo que esa configuración venga activada por defecto en esta versión? Mientras incluyamos logotipos predeterminados en la versión oscura, ¿debería estar bien?

6 Me gusta

¡Esta función es muy útil, gracias por incluirla en el núcleo!

He creado un GIF para demostrarlo en Windows. Discourse cambia instantáneamente, más rápido que el propio sistema operativo :+1:

Puedes encontrar más detalles en mi instancia si te interesa.

https://forums.chalk.sg/t/prefer-a-dark-theme-try-out-dark-mode/110/2

9 Me gusta

:clap: Ahora puedo leer el doble. :laughing:

7 Me gusta