Commutation automatique du schéma de couleurs du mode sombre

pmusaraj · Août 20, 2020, 10:17

Vous pouvez désormais configurer votre site Discourse pour qu’il change automatiquement de schéma de couleurs lorsque l’appareil de l’utilisateur est en mode sombre. Pour un aperçu rapide, rendez-vous sur l’instance try.discourse.org et activez/désactivez le mode sombre de votre appareil pour voir cette nouvelle fonctionnalité en action. (Cette fonctionnalité n’est pas activée sur meta.)

Activation du mode sombre automatique

Pour activer cette fonctionnalité sur votre instance, sélectionnez le schéma de couleurs en mode sombre dans les paramètres de votre site :

Une fois ce paramètre défini, rechargez votre site avec un appareil en mode sombre et vous devriez voir le schéma de couleurs sombre en cours d’utilisation.

Si le logo qui fonctionnait bien sur un schéma clair ne convient pas aussi bien sur un fond sombre, vous pouvez désormais télécharger des alternatives dans les nouveaux paramètres disponibles dans le cœur du système.

Les fichiers téléchargés dans ces paramètres remplaceront le paramètre régulier du même nom si a) la commutation automatique du mode sombre est activée et que l’appareil de l’utilisateur est en mode sombre, ou b) l’utilisateur utilise un thème sombre (même s’il n’est pas en mode sombre). Les sites qui utilisaient auparavant https://meta.discourse.org/t/alternative-logos-for-dark-light-themes/88502 peuvent maintenant passer à l’utilisation des paramètres du site du cœur du système et supprimer ce composant.

Certains utilisateurs peuvent ne pas vouloir basculer automatiquement vers un schéma de couleurs sombre lorsque leur navigateur est en mode sombre. Ils peuvent désactiver cette fonctionnalité en décochant l’option « Activer le schéma de couleurs automatique en mode sombre » dans leur écran Préférences > Interface :

Sélecteur de schéma de couleurs choisi par l’utilisateur

Pour utiliser cette fonctionnalité, vous devez créer plusieurs schémas de couleurs sur votre site et les marquer comme sélectionnables par les utilisateurs :

Une fois cela fait, les utilisateurs devraient voir deux menus déroulants dans la page Préférences > Interface :

Voir également Update themes and plugins to support automatic dark mode

pmusaraj · Décembre 17, 2020, 3:28

Lorsqu’il arrivera sur le canal Beta, je pourrai le tester. Techniquement, il n’y a aucune raison pour que cela ne fonctionne pas, si ChromeOS (comme Android, iOS, macOS, etc.) respecte la requête média prefer-color-scheme.

Je viens de tester cela sur un Chromebook dans le canal Beta. Cela fonctionne en quelque sorte, mais c’est imparfait. J’ai pu forcer le mode sombre pour tout le contenu web, y compris les sites Discourse (j’ai testé avec try.discourse.org). Mais il ne semble pas pouvoir basculer le contenu web lorsque l’on change le thème du système entre sombre et clair. En jouant avec, je me suis souvent retrouvé dans un état hybride, où certaines parties de l’interface utilisateur utilisaient le mode clair et d’autres le mode sombre.

Pour les autres qui souhaitent essayer cela, rendez-vous sur chrome://flags, recherchez « Dark » et activez « Dark/light mode of system UI » et « Force Dark Mode for Web Contents ».

manuel · Décembre 19, 2020, 10:42

Nous disposons d’un thème clair et d’un thème sombre. Le thème sombre affiche tout comme nous le souhaitons, y compris les icônes des balises et les aperçus des sujets. Cependant, le schéma de couleurs sombre présente pas mal de bugs lors de l’utilisation de ces extensions. Je me demande simplement : pourquoi ne pas pouvoir définir un thème par défaut pour le mode sombre automatique, plutôt qu’un schéma de couleurs par défaut ? Le thème semble permettre des ajustements bien plus poussés que le schéma de couleurs.

pmusaraj · Décembre 21, 2020, 6:24

Je pense que vous voulez dire qu’il y a des problèmes liés au mode sombre avec l’extension d’aperçu des sujets ? Si je clique sur le site de votre profil utilisateur, je constate effectivement que certaines couleurs au survol sont incorrectes en mode sombre. Peut-être que l’extension d’aperçu des sujets a besoin d’une petite mise à jour pour mieux prendre en charge le mode sombre (il existe un guide pour les développeurs d’extensions). Si c’est le cas, je pense qu’il vaut la peine de soulever le problème dans le sujet dédié à cette extension.

Nous ne pouvons pas changer de thème à la volée. Les thèmes peuvent contenir du code JavaScript personnalisé, et il n’est pas possible de changer ce code sans recharger la page.

Alex_P · Janvier 6, 2021, 8:24

Hmm, je ne le vois pas dans la dernière version.

pmusaraj · Janvier 6, 2021, 1:50

Voilà, la case à cocher s’affiche s’il n’existe qu’un seul thème sombre disponible. Nous avons récemment introduit les thèmes compatibles WCAG, ce qui modifie l’interface pour afficher les deux menus déroulants que vous voyez sous « Thèmes de couleur » dans votre capture d’écran.

Les utilisateurs souhaitant désactiver le mode sombre automatique peuvent cliquer sur le menu déroulant « Mode sombre » et le définir sur « Identique au mode normal ».

littleviolette · Février 11, 2021, 12:22

Est-il possible que cette case soit décochée par défaut ? La plupart des membres de notre communauté ne sont pas habitués à naviguer sur le site en mode sombre. Certains utilisateurs aimeraient tout de même avoir l’option du mode sombre automatique.

tobiaseigen · Mars 22, 2021, 4:29

Est-ce toujours la meilleure façon de tester cette fonctionnalité ? Je ne vois aucun changement de thème sur try lorsque je visite avec mon Chromebook et que j’active/désactive le mode sombre. Même rafraîchir la page web ne fait rien. Je suis sur la dernière version de ChromeOS. J’ai aussi essayé de créer un compte de test et fait la même chose, sans aucun changement.

J’ai également jeté un œil sur d’autres sites que j’utilise, y compris ceux en auto-hébergement et Teams, et je n’arrive pas à obtenir ce changement automatique basé sur mon paramètre de mode sombre de l’appareil.

ps - j’adore la fonctionnalité d’enregistrement d’écran sur ChromeOS. Vraiment cool !

codinghorror · Mars 23, 2021, 1:47

Donc ça fonctionne sur Windows et iOS, mais pas sur ChromeOS ? C’est ce que montrent les tests ? Cela implique pour moi que ChromeOS a peut-être besoin d’une mise à jour ou ne fonctionne pas exactement comme les autres ? Des idées @pmusaraj ?

pmusaraj · Mars 23, 2021, 1:50

Oui, il s’agit clairement d’un problème lié à ChromeOS. Le mode sombre fonctionne correctement sur tous les systèmes d’exploitation qui le prennent en charge, à savoir macOS, Windows, iOS, Android et plusieurs distributions Linux. Nous n’avons vraiment rien à faire dans ce cas.

anon73664359 · Juillet 6, 2021, 2:11

Serait-il possible de l’activer maintenant ?

codinghorror · Juillet 7, 2021, 12:38

Hmm, bonne remarque, comment testons-nous cela @pmusaraj sur Meta ? J’ai activé le « mode sombre » pour les applications sous Windows 10 et je vois que Twitter (web/Chrome) passe en mode sombre, mais pas Meta ?

pmusaraj · Juillet 7, 2021, 12:47

Oui, cela n’est toujours pas activé sur Meta car nous avons de nombreux thèmes activés ici, chacun conçu pour fonctionner avec une palette de couleurs spécifique. De plus, nous disposons d’un sélecteur de thème dans le menu hamburger, ce qui ne fonctionne pas bien avec les palettes de couleurs.

codinghorror · Juillet 7, 2021, 12:58

Ah, je vois. Est-ce que cela fonctionne avec une installation par défaut de Discourse ? Puis-je le faire fonctionner avec https://discourse.codinghorror.com/ ?

pmusaraj · Juillet 7, 2021, 1:01

Oui, cela fonctionne sur une installation par défaut. Cela fonctionne par exemple sur https://try.discourse.org.

Sur https://discourse.codinghorror.com/, vous devrez peut-être basculer le paramètre (par défaut, il est défini sur Aucun) :

codinghorror · Juillet 7, 2021, 1:03

Ah, je vois. Mon installation est assez ancienne et ne proposait qu’un seul thème de couleurs, le mode clair. J’ai ajouté un nouveau thème de couleurs basé sur le mode sombre par défaut, et cela a fonctionné — je peux confirmer que la bascule entre les modes sombre et clair dans les paramètres Windows affecte désormais automatiquement Discourse !

Mais cela fonctionne-t-il dès l’installation pour une nouvelle installation de Discourse ? J’espère que oui ?

pmusaraj · Juillet 7, 2021, 1:07

Oui, plusieurs combinaisons de couleurs sont ajoutées par défaut (Clair, Sombre, WCAG Clair, WCAG Sombre). Cependant, ce paramètre est désactivé par défaut : les nouveaux administrateurs doivent le rechercher pour l’activer.

codinghorror · Juillet 7, 2021, 1:12

Devrions-nous peut-être nous fixer pour objectif que ce paramètre soit activé par défaut dans cette version ? Tant que nous livrons des logos par défaut dans la version sombre, cela devrait convenir ?

Kchalk · Juillet 7, 2021, 2:26

Cette fonctionnalité est tellement utile, merci de l’avoir intégrée au cœur du système.

J’ai créé une GIF pour la démontrer sous Windows. Discourse bascule instantanément, plus vite que le système d’exploitation lui-même

Vous trouverez des détails supplémentaires sur mon instance si cela vous intéresse.

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

JimPas · Juillet 7, 2021, 4:25

Maintenant, je peux lire deux fois plus.

Sujet		Réponses	Vues
Sync light / dark choice when signing up on a new site UX auto-dark	1	203	Mai 3, 2024
How to make the automatic dark theme the same as the selected dark theme? Support dark-theme , dark-mode-toggle	10	461	Décembre 14, 2024
Automatic Dark Mode Support auto-dark	22	1616	Septembre 13, 2023
Explanation of dark mode, how to select it, and how to enable switching Users	4	695	Mai 11, 2025
Default theme based on user's system? Support	4	1142	Septembre 16, 2022

Commutation automatique du schéma de couleurs du mode sombre

Activation du mode sombre automatique

Sélecteur de schéma de couleurs choisi par l’utilisateur

Sujets connexes