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).
Merci pour ce composant génial, je le cherchais ! Malheureusement, je n’arrive pas à le faire fonctionner. Peut-être une chose toute simple, mais où puis-je trouver l’identifiant du thème sombre ? Est-ce simplement le nom du thème ?
L’ID est le numéro du thème dans l’URL lorsque vous l’avez sélectionné dans l’administration. Par exemple, dans l’URL : /admin/customize/themes/39, c’est 39.
Google Chrome prend désormais en charge le mode sombre sur iOS 13 et iPadOS 13. Je ne suis pas trop sûr de la prise en charge du mode sombre pour Google Chrome sur MacOS Mojave ou MacOS Catalina, cependant.
Quand la prise en charge de Google Chrome arrivera-t-elle ?
Cela devrait déjà fonctionner dans Chrome. En coulisses, cela utilise la requête média prefers-color-scheme, et le support par les navigateurs est plutôt bon aujourd’hui : Can I use... Support tables for HTML5, CSS3, etc
Oui, j’espère aussi vivement que cela fera partie de l’installation standard de Discourse. Certaines personnes se contentent de mettre à jour leurs forums sans aller plus loin.
@pmusaraj Une chose que j’ai remarquée, c’est que le basculement ne fonctionne que pour les utilisateurs connectés. Existe-t-il un moyen de le définir automatiquement pour les utilisateurs anonymes qui n’ont pas encore créé de compte (par exemple, passer au thème sombre lors de l’utilisation d’une fenêtre de navigation privée) ?
La fonctionnalité « prefers-color-scheme » est également prise en charge par Windows. Les dernières versions de Chrome Beta et de Firefox prennent en charge cette requête média.
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é.
