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.
I just pushed a small update to this theme component to make it compatible with iOS 13 (which will ship with Dark Mode as well as an option to automatically enable it in the evenings).
Thanks for this awesome component, I’ve been looking for this! Unfortunately I can’t seem to get it to work. Perhaps something trivial but where do I find the dark theme id? Is that just the name of the theme?
Google Chrome now supports dark mode on iOS 13 and iPadOS 13. I’m not too sure about dark mode support for Google Chrome on MacOS Mojave or MacOS Catalina though.
it should work in Chrome already, under the hood it uses the prefers-color-scheme media query and browser support for it is pretty good nowadays: Can I use... Support tables for HTML5, CSS3, etc
Yeah, I also really hope that this becomes part of the standard Discourse install. Some people only like to update their forums and don’t really go beyond that.
@pmusaraj one thing I noticed is that the switching only works for logged in users, is there a way to also have it automatically set for anonymous users that haven’t created an account yet (e.g. switch to dark theme while using a private browser window)?
This component seems to create an issue with 2.4.0.beta11+39. In my registered-users-only community the login screen at https://mydomain/login is blank. It works normally when this component is deactivated.
I can’t reproduce this locally with latest Discourse and latest version of the component. When the login screen is blank, is there an error in the browser console?
Update: the issue Thomas was running into is now fixed in the component. Thanks for the report!
Discourse ahora soporta Automatic Dark Mode color scheme switching en el núcleo; este componente está ahora obsoleto y ya no debe usarse.
