Ce composant permet la bascule automatique vers un thème sombre lorsque le navigateur est configuré en mode sombre. Cela fonctionne uniquement pour les utilisateurs connectés sur tous les navigateurs prenant en charge la requête média prefers-color-scheme.
Par défaut, ce composant est activé et chaque utilisateur peut le désactiver dans ses Préférences > Interface. Les administrateurs peuvent également définir le composant comme étant désactivé par défaut ; dans ce cas, les utilisateurs verront un bouton pour activer la bascule automatique dans leurs préférences d’interface.
Comment cela fonctionne-t-il ?
Si le navigateur est en mode sombre, ce composant recharge Discourse avec le thème sombre activé. Si le navigateur revient en mode clair, ce composant recharge Discourse avec le thème par défaut activé.
Il rechargera également la page si le mode sombre est basculé pendant que l’utilisateur est sur le site (comme montré dans la vidéo ci-dessus).
(Si vous avez plus de deux thèmes activés et que l’utilisateur a sélectionné un thème autre que le thème par défaut ou le thème sombre, ce composant n’effectuera aucune action, c’est-à-dire qu’il respectera le choix de l’utilisateur.)
Configuration
Assurez-vous d’avoir un thème sombre installé et qu’il soit sélectionnable par les utilisateurs.
Ajoutez ce composant à la fois au thème par défaut et au thème sombre (très important : si vous ne l’ajoutez pas aux deux thèmes, les utilisateurs ne pourront pas revenir au thème par défaut).
Dans les paramètres du composant, saisissez l’ID de votre thème sombre dans 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)?
Ce composant semble poser un problème avec la version 2.4.0.beta11+39. Dans ma communauté réservée aux utilisateurs enregistrés, l’écran de connexion à l’adresse https://mydomain/login est vide. Tout fonctionne normalement lorsque ce composant est désactivé.
Je ne parviens pas à reproduire ce problème localement avec la dernière version de Discourse et la dernière version du composant. Lorsque l’écran de connexion est vide, y a-t-il une erreur dans la console du navigateur ?
Mise à jour : le problème auquel Thomas était confronté est maintenant résolu dans le composant. Merci pour votre signalement !
Discourse prend désormais en charge Automatic Dark Mode color scheme switching dans son cœur. Ce composant est désormais obsolète et ne doit plus être utilisé.
