Basculer entre le mode sombre et le mode clair

[Discourse]

Ce composant de thème a été déprécié. Veuillez consulter Dark/light mode toggle now available in core

	Résumé	Dark/Light Mode Toggle ajoute un bouton de sélection de schéma de couleurs cliquable dans le menu hamburger. Le bouton permet de basculer entre un schéma de couleurs clair ou sombre pour un thème donné.
	Lien vers le dépôt	https://github.com/discourse/discourse-color-scheme-toggle
	Nouveau sur les thèmes Discourse ?	Guide du débutant pour utiliser les thèmes Discourse

Installer ce composant de thème

Étant donné qu’il s’agit d’un composant de thème #officiel maintenu par l’équipe Discourse, les demandes de Support, Contribute > Bug, Contribute > UX et Contribute > Feature peuvent être effectuées dans les catégories respectives ici sur Meta, et taguées avec le tag approprié du composant de thème. Cliquez sur un lien ci-dessous pour en créer un.

 Support  Bug  UX  Fonctionnalité

Fonctionnalités

Ce composant permet d’afficher une icône de basculement mode sombre/clair sur votre forum Discourse. Il basculera également automatiquement si vous modifiez le mode de votre système d’exploitation pour passer à un mode différent de votre schéma de couleurs actuel.

Vous pouvez choisir d’afficher le bouton de basculement dans la nouvelle barre latérale Discourse ou dans l’en-tête aux côtés des autres icônes.

Barre latérale

En-tête

Étapes importantes

Pour que cela fonctionne correctement, au moins 2 choix de schéma de couleurs doivent être activés dans votre zone /admin/customize/colors. Au moins deux couleurs doivent avoir l’option le schéma de couleurs peut être sélectionné par les utilisateurs activée.

Un schéma de couleurs par défaut doit être défini pour le mode sombre : /admin/site_settings/category/basic?filter=dark

Une fois cela fait, les utilisateurs devraient pouvoir choisir entre deux schémas de couleurs comme préférences light et dark dans le menu des préférences de leur compte utilisateur.

Paramètres

Nom	Descriptions
svg icons
add color scheme toggle to header	Ajouter le bouton de sélection de schéma de couleurs à l’en-tête du site

Traduction	Défaut
toggle_button_title	Basculer le schéma de couleurs

Hébergé par nous ? Les composants de thème sont disponibles à l’utilisation sur nos plans Standard, Business et Enterprise.

[chrisbagsrocks]

Est-ce que cela fonctionne uniquement avec l’entrée de l’utilisateur en allant dans ses préférences et en l’activant ? Ce serait beaucoup mieux si cela pouvait être une implémentation sur l’ensemble du site plutôt que sur une base utilisateur par utilisateur.

[jordan.vidrine]

Un administrateur activerait ce composant pour l’ensemble du site.

Ensuite, en fonction de ce que l’administrateur qui a configuré le composant a défini, le commutateur se trouvera soit dans le menu hamburger de l’utilisateur, soit dans l’en-tête du forum. Tous les utilisateurs pourront l’utiliser une fois qu’il aura été activé par un administrateur.

[chrisbagsrocks]

Désolé, je ne pense pas avoir été clair dans ma question. En regardant votre tutoriel d’installation, une fois qu’il est activé côté administrateur, soit dans le menu hamburger, soit dans l’en-tête, il semble que chaque utilisateur individuel doive aller dans ses préférences et activer/ajouter les thèmes de couleurs clair/sombre. Sinon, cela ne fonctionne pas pour un nouvel utilisateur / quelqu’un qui n’est pas connecté. Ma question est donc :
Est-il possible d’implémenter le thème de couleurs sur l’ensemble du site plutôt que sur une base individuelle pour chaque utilisateur.
Votre photo est ci-dessous à titre de référence

[jordan.vidrine]

Je pense qu’un schéma clair et un schéma sombre seront automatiquement attribués une fois qu’un administrateur l’aura activé. À partir de là, un utilisateur pourra modifier les schémas de couleurs sombres et clairs utilisés selon sa préférence personnelle.

Vous devrez peut-être également ajouter une sélection ici /admin/site_settings/category/basic?filter=dark

J’ai mis à jour les instructions pour refléter cet ajout. Désolé pour la confusion !

[bekircem]

Il semble que cela ne fonctionne pas correctement lorsque le schéma de couleurs par défaut est sombre. Comment pouvons-nous adapter cela ?

Lorsque le schéma de couleurs par défaut est sombre, le commutateur ne fonctionne pas à moins qu’un utilisateur n’ait sélectionné le schéma de couleurs clair dans les préférences de l’interface.

[jordan.vidrine]

Hmmm, je pense que cela se produit parce que je vérifie les paramètres du schéma utilisateur prefers-dark en fonction des paramètres du navigateur et du système.

Pouvez-vous regarder dans la console de votre inspecteur et voir si quelque chose apparaît lorsque vous essayez d’utiliser le commutateur ?

Je devrai peut-être examiner cela.

[poyrazdursuncan (Dursun Can)]

Avertissements sur domain.com/logs ;

Le composant/thème Dark-Light Toggle génère des erreurs

initialize@https://develcoder.com/theme-javascripts/1d5669cf8344e0837406cef0be37bb086b5968f5.js?__ws=develcoder.com:153:73

initialize@https://develcoder.com/assets/application-01686ed6ee22a989833acbbce970ba63.js:1:11855

https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:268273

each@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:429458

walk@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:428478

each@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:427828

topsort@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:427874

_runInitializer@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:268501

runInstanceInitializers@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:268222

_bootSync@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:252462

didBecomeReady@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:257791

invoke@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:418024

flush@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:417018

flush@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:418946

_end@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:424401

end@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:421081

_run@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:424937

u@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:26:26509


https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:26:26807

[Mr.X_Mr.X]

Même ici. Le composant Dark light génère des erreurs.

[jordan.vidrine]

@poyrazdursuncan

Le composant/thème de bascule sombre-clair génère des erreurs

@Mr.X_Mr.X

Pareil ici. Le composant sombre-clair génère des erreurs.

Hmmm… je ne suis pas sûr d’où cela vient car je n’ai aucun code qui devrait l’envoyer. La seule communication que j’ai pour une erreur est ici :

https://github.dev/discourse/discourse-color-scheme-toggle/blob/3474a80d81d89f1264be5d55652dc65b5aea68e2/javascripts/discourse/initializers/dark-light-toggle-hamburger.js#L56-L59

Pouvez-vous lier votre site ici si possible ? Votre instance est-elle à jour ?

[Arta_S (Arta)]

Bonjour,

J’ai un problème. Après avoir ajouté le thème, les icônes de bascule ne sont pas ajoutées dans le menu hamburger. Elles n’existent même pas dans le code brut. De plus, vous démo ici les boutons ne fonctionnent pas. Cela signifie qu’ils ne basculent pas entre les thèmes clair et sombre.

Quelqu’un d’autre rencontre le même problème ?

[jordan.vidrine]

Pouvez-vous vérifier la console des outils de développement et voir si quelque chose apparaît en rapport avec ceci ? Je vois que les icônes fonctionnent bien sur le site de démonstration.

[Arta_S (Arta)]

Voici la vidéo :

Mon principal problème est que sur mon forum, je ne vois même pas ces options dans le menu hamburger :

[jordan.vidrine]

Vous n’avez pas l’onglet console ouvert dans votre screencast, il est donc difficile de voir si des erreurs se produisent.

Avez-vous bien suivi chaque étape du message original sur ce sujet ?

au moins 2 choix de schémas de couleurs doivent être activés dans votre espace /admin/customize/colors
Un thème sombre doit être activé à l’adresse : /admin/site_settings/category/basic?filter=dark

Et avez-vous, en tant qu’utilisateur, sélectionné deux schémas de couleurs, un pour la lumière et un pour le sombre, dans vos préférences utilisateur ?

[Arta_S (Arta)]

@jordan.vidrine

Avez-vous bien suivi chaque étape du message original sur ce sujet ?

Bonjour,

Oui, cela a été correctement exécuté. Aujourd’hui, tout s’affiche correctement. C’était à cause des cookies. Il était étrange que sur d’autres navigateurs (où je n’avais jamais visité le forum) cela s’affichait également manquant. Maintenant, tout est correct. Merci et désolé pour la confusion que j’ai causée.

La seule chose est que tous les utilisateurs, y compris les invités, peuvent voir le basculement dans l’en-tête. Mais en tant qu’administrateur, lorsque je suis connecté, je ne peux pas voir les basculements. Est-ce intentionnel ? Cela pourrait-il être un cache serveur ou autre chose ?

[jordan.vidrine]

Hmm, c’est intéressant. Avez-vous sélectionné un schéma de couleurs sombre et clair dans vos préférences utilisateur ?

Et utilisez-vous le thème sur lequel le composant est installé ?

[Arta_S (Arta)]

J’ai dû aller sur mon profil et activer cette option (Activer le schéma de couleurs automatique du mode sombre) pour qu’elle apparaisse dans l’en-tête. J’ai probablement tripoté les réglages et manqué cette case à cocher.

[agungor]

J’adore ce composant ! Mais j’ai un petit souci.

Il semble que le composant ne fonctionne que lorsque l’option « Activer le schéma de couleurs du mode sombre automatique » est activée. Mon problème survient lorsque l’option est activée et que la préférence du système est définie sur le mode sombre (c’est-à-dire, schéma de couleurs préféré : sombre).

Dans le scénario ci-dessus, lorsque j’essaie de passer à un thème clair via Préférences > Interface > Thème, rien ne se passe, ce qui me convient. Vraisemblablement, puisque ma préférence système est déjà définie sur le mode sombre, le passage au mode clair dans Discourse ne le remplace pas.

Lorsque je fais la même chose avec le composant Dark / Light Mode Toggle, et si ma préférence de thème dans Discourse est définie sur Clair, le basculeur me permet réellement de passer en mode clair (ce qui est encore mieux à mon avis), mais le logo du site dans l’en-tête reste en mode sombre et difficile à voir en mode clair. Lorsque je regarde dans l’inspecteur, je vois que l’élément ressemble à ceci :

<div class="title">
  <a href="/" data-auto-route="true">
    <picture>
      <source srcset="<link to image>" media="(prefers-color-scheme: dark)">
      <img src="<link to image>" id="site-logo" class="logo-big">
    </picture>
  </a>
</div>

J’ai remarqué la partie media=“(prefers-color-scheme: dark)” bien que nous soyons maintenant en mode clair défini par le basculeur.

Je dois ajouter que le logo du site bascule normalement entre le mode clair et le mode sombre lorsque l’option « Activer le schéma de couleurs du mode sombre automatique » dans Discourse est décochée. Mais cela empêche l’affichage du composant Dark / Light Mode Toggle

De plus, si ma préférence de thème dans Discourse est définie sur Sombre dans Préférences > Interface > Thème, et que ma préférence système est également sombre, le basculeur ne bascule pas entre clair et sombre — il reste toujours sur le thème sombre.

Idéalement, je préférerais que le composant Dark / Light Mode Toggle fonctionne comme il le fait actuellement, mais que le logo du site dans l’en-tête suive le réglage clair/sombre actuellement actif, et non le schéma de couleurs préféré du système de l’utilisateur.

[MattiaB (Mattia)]

@agungor

Lorsque je fais la même chose avec le composant Dark / Light Mode Toggle, et si ma préférence de thème dans Discourse est définie sur Light, le basculement me permet en fait de passer en mode clair (ce qui est encore mieux à mon avis) mais le logo du site dans l’en-tête reste en mode sombre et difficile à voir en mode clair.

Même ici ! Avez-vous trouvé une solution ?

Je ne suis pas développeur frontend mais j’ai fait quelques débogages :
En mode sombre, comme mon ordinateur est configuré, le HTML du logo ressemble à ceci :

Et le logo est bien, le mode sombre fonctionne parfaitement. En passant en mode clair, le thème devient clair mais le logo disparaît (le logo sombre reste).

Voici à quoi ressemble le HTML :

Il y a une ligne supplémentaire, <source srcset="https://radixtalk.com/uploads/default/original/1X/19838ecb731d3f87d9db76c927e793ab2e159f1e.png" media="(prefers-color-scheme: dark)"> qui “bloque” le chargement du logo correct. Si je supprime cette ligne avec Inspect Element, et que je laisse seulement <img src="https://radixtalk.com/uploads/default/original/1X/237090c67d33a1a38f9f031336dab420c4c4a37d.png" alt="RadixTalk" id="site-logo" class="logo-small" width="36">, le logo correct apparaît.

J’espère que ces informations ont été utiles.

[agungor]

@MattiaB

Même ici ! Avez-vous trouvé une solution ?

Je crains que non. J’ai fini par changer la couleur d’arrière-plan de l’en-tête de manière à ce que le passage du logo entre le mode clair et le mode sombre n’ait plus d’importance