Este componente permite el cambio automático a un tema oscuro cuando el navegador está configurado en modo oscuro. Esto funciona solo para usuarios iniciados en todos los navegadores que soportan la consulta de medios prefers-color-scheme.
Por defecto, este componente está habilitado y los usuarios individuales pueden desactivarlo en su pantalla de Preferencias > Interfaz. Los administradores también pueden configurar el componente para que esté desactivado por defecto; en ese caso, los usuarios verán un botón para habilitar el cambio automático en sus preferencias de interfaz.
¿Cómo funciona?
Si el navegador está en modo oscuro, este componente recargará Discourse con el tema oscuro habilitado. Si el navegador vuelve al modo claro, este componente recargará con el tema predeterminado habilitado.
También se recargará si se cambia el modo oscuro mientras el usuario está en el sitio (como se muestra en el video anterior).
(Si tienes más de dos temas habilitados y el usuario ha seleccionado un tema diferente al predeterminado o al oscuro, este componente no hará nada, es decir, respetará la elección del usuario.)
Configuración
Asegúrate de tener un tema oscuro instalado y que sea seleccionable por los usuarios.
Añade este componente tanto al tema predeterminado como al tema oscuro (muy importante; si no lo añades a ambos temas, los usuarios no podrán volver al tema predeterminado).
En la configuración del componente, ingresa el ID de tu tema oscuro en dark theme id.
Acabo de publicar una pequeña actualización en este componente del tema para que sea compatible con iOS 13, el cual se lanzará con el Modo Oscuro y una opción para activarlo automáticamente por las tardes.
¡Gracias por este increíble componente, he estado buscando esto! Desafortunadamente, no logro que funcione. Quizás sea algo trivial, pero ¿dónde encuentro el ID del tema oscuro? ¿Es simplemente el nombre del tema?
El ID es el número del tema en la URL cuando lo has seleccionado en el panel de administración. Por ejemplo, en esta URL: /admin/customize/themes/39, es 39.
Google Chrome ahora admite el modo oscuro en iOS 13 y iPadOS 13. Sin embargo, no estoy muy seguro sobre el soporte del modo oscuro para Google Chrome en macOS Mojave o macOS Catalina.
Ya debería funcionar en Chrome; por detrás utiliza la consulta de medios prefers-color-scheme y el soporte del navegador para ella es bastante bueno hoy en día: Can I use... Support tables for HTML5, CSS3, etc
Sí, yo también espero mucho que esto forme parte de la instalación estándar de Discourse. Algunas personas solo quieren actualizar sus foros y no van más allá de eso.
@pmusaraj una cosa que noté es que el cambio solo funciona para usuarios con sesión iniciada. ¿Existe alguna forma de configurarlo también automáticamente para usuarios anónimos que aún no han creado una cuenta (por ejemplo, cambiar al tema oscuro al usar una ventana de navegación privada)?
La función “prefers-color-scheme” también es compatible con Windows. La última versión de Chrome Beta y la última versión de Firefox admiten esta consulta de medios.
Este componente parece causar un problema con la versión 2.4.0.beta11+39. En mi comunidad de solo usuarios registrados, la pantalla de inicio de sesión en https://mydomain/login aparece en blanco. Funciona con normalidad cuando este componente está desactivado.
No puedo reproducir esto localmente con la última versión de Discourse y la última versión del componente. Cuando la pantalla de inicio de sesión está en blanco, ¿hay algún error en la consola del navegador?
Actualización: el problema con el que Thomas se encontró ahora está solucionado en el componente. ¡Gracias por el informe!
Discourse ahora soporta Automatic Dark Mode color scheme switching en el núcleo; este componente está ahora obsoleto y ya no debe usarse.
