Commutateur de mode sombre/clair

OK Je pense que le problème était qu’avec chaque schéma de couleurs, la case « les utilisateurs peuvent choisir ceci… » ou autre chose n’était pas cochée. ça marche maintenant

2 « J'aime »

J’ai un problème de seringue qui ne semble affecter que 2 catégories.

Si en mode sombre, un rafraîchissement affiche le logo Might Site. Le passage à la lumière puis de retour au mode sombre le résout. Mais cela se reproduira lors d’un rafraîchissement.

Après rafraîchissement

Pour être plus précis, il semble que ce soit uniquement le sujet des logos. D’autres sujets dans la catégorie semblent corrects. D’autres sujets dans cette catégorie ne sont pas affectés. Cela pourrait être lié au fait que ce sujet contient les 2 logos téléchargés ?

1 « J'aime »

Correction, il semble que ce soit aussi lorsque la page se charge pour la première fois. Alors peut-être un problème avec la détection du mode sombre par le navigateur de Discourse ?

2 « J'aime »

Je n’arrive pas à reproduire ce problème. Pourriez-vous détailler les étapes, le navigateur et l’appareil que vous utilisiez ?

2 « J'aime »

Nos utilisateurs ont signalé qu’après être passés manuellement en mode sombre, le forum revient automatiquement en mode clair une fois que l’appareil repasse en mode clair.

Pour reproduire :

  1. Réglez les paramètres de votre appareil en mode clair
  2. Activez le bouton bascule dans la barre latérale
  3. Activez le mode sombre sur votre appareil
  4. Désactivez le mode sombre sur votre appareil

→ L’instance Discourse passe en mode clair. Le comportement attendu est que le forum reste en mode sombre en raison du choix de l’utilisateur de passer manuellement.

Fondamentalement, ce serait formidable d’avoir l’option du comportement précédent pour basculer entre le mode sombre, le mode clair et la commutation automatique marche/arrêt.

3 « J'aime »

J’exécute Android 10 je crois sur un LG G8X ThinQ, celui avec l’étui double écran.

Si je change d’application, lorsque je reviens en arrière, il semble charger le thème clair momentanément avant de passer au thème sombre. Similaire à la personnalisation des fenêtres. Le logo clair reste affiché (logo mobile).

@jrgong l’explication sur la façon de reproduire et la cause suspectée est aussi la mienne.

Le navigateur est en mode clair et le basculement active/force le mode sombre. Ensuite, Discourse bascule en partie vers le mode clair.

1 « J'aime »

Je vois un bref éclair de la palette de couleurs opposée lors de l’actualisation ou lorsque j’ouvre un lien dans un nouvel onglet. Je vois également un éclair similaire après avoir posté une nouvelle réponse pour une raison quelconque.

J’ai un thème clair activé, et mon système d’exploitation est configuré en mode sombre. Je vois donc la différence lorsque je repasse au clair.

Je suppose que les couleurs sont échangées côté client, mais il semble que les paramètres utilisateur ne soient pas modifiés ? Est-il possible de mettre à jour la préférence de « palette de couleurs » de l’utilisateur lors du basculement pour éviter cela ? Le changement côté client peut fournir une transition transparente, et la modification de la préférence utilisateur peut éviter le bref éclair de la palette de couleurs opposée lors de l’actualisation ?

5 « J'aime »

@jordan.vidrine Je voulais juste remonter ce point. :slight_smile:

2 « J'aime »

Il devrait apparaître dans le nouveau menu déroulant de l’en-tête. (Celui qui est la « barre latérale » mais sous forme de menu déroulant)

1 « J'aime »

@awesomerobot et @jrgong juste une mise à jour. Ceci sera examiné :+1:

2 « J'aime »

Malheureusement, ce n’est pas le cas. Mais je sais maintenant pourquoi.

navigation_menu est défini sur Header-Drop-Down mais je ne pouvais pas voir l’option. Mais lorsque j’ai désactivé add_color_scheme_toggle_to_header, il est apparu dans le menu déroulant. Il semble donc qu’il n’apparaisse qu’à un seul endroit.

Merci ! :slight_smile:

2 « J'aime »

Ce composant peut sélectionner entre les thèmes « clair » et « sombre », mais il ne bascule pas entre les modes clair et sombre, car @media (prefers-color-scheme) n’est pas respecté.

Un composant de thème qui ressemble à ceci

CSS

@media (prefers-color-scheme: light) {
    .darkonly { display: none; }
}
@media (prefers-color-scheme: dark) {
    .lightonly { display: none; }
}

et HEAD

<script type='text/x-handlebars' data-template-name='/connectors/above-site-header/darkdetector'>
    <span class="darkonly">Sombre</span><span class="lightonly">Clair</span>
</script>

affichera le texte « clair » même si le « mode » sombre est activé (ou, pour mieux dire : affichera « sombre » ou « clair » en fonction du mode sombre du système d’exploitation, et indépendamment du thème choisi).

Existe-t-il une solution pour cela ? De nombreuses choses dépendent de ces requêtes média.

3 « J'aime »

Si discourse est similaire à windows xp, essayez d’avoir le navigateur/système d’exploitation en mode clair et discourse en mode sombre. Dans windows xp, la palette de couleurs est toujours superposée par-dessus la valeur par défaut.

Lorsqu’il existe plus d’un schéma de couleurs sombres sélectionnable par l’utilisateur, les deux listes déroulantes apparaissent et l’icône de bascule s’affiche.

image

Lorsqu’il n’existe qu’un seul schéma de couleurs sombres sélectionnable par l’utilisateur, la liste déroulante Sombre disparaît et, à la place, la case à cocher “mode sombre automatique” apparaît.

Lorsqu’un utilisateur pense “Hé, je ne veux pas que ce soit automatique, je veux utiliser la bascule” et décoche la case “automatique”, la bascule disparaît.

Donc, pour obtenir la bascule manuelle, vous devez activer la commutation automatique. :thinking:

5 « J'aime »

Ainsi, l’encoche d’un iPhone obtient sa couleur à l’aide des balises

<meta name="theme-color" media="(prefers-color-scheme: ...)" content="#...">

qui sont injectées dans l’en-tête HTML. Cela signifie que si votre appareil est en mode sombre et que le sélecteur a choisi un thème clair, ou si l’appareil est en mode clair et que le sélecteur a choisi un thème sombre, la couleur de l’encoche de l’iPhone est incorrecte.

1 « J'aime »

Je pense que ce comportement n’est pas souhaité :

Actuellement, la couleur du système est définie sur le mode sombre. J’utilise un logo noir et blanc pour les thèmes clair/sombre.

  1. Sur l’instance, je définis le thème sur Clair.
  2. Je visite une page de sujet.
  3. Initialement, le bon logo est chargé mais :
  4. Faites défiler vers le bas puis vers le haut (l’en-tête doit passer du logo complet > titre du sujet > logo complet.
  5. Lorsque vous faites défiler vers le haut (par exemple, là où le titre du sujet redevient le logo complet, le mauvais logo (blanc sur blanc) apparaît.
2 « J'aime »

J’essaie de reproduire cela localement et même lorsqu’un seul schéma de couleurs sombres est sélectionnable, je vois toujours le menu déroulant, au lieu du mode automatique. (dans les paramètres d’administration)

Repro :

  • Installation Discourse vierge prête à l’emploi depuis ce matin
  • Voir ceci dans mon profil → interface

  • Supprimer les thèmes de couleur dracula, solarized dark et WCAG dark
  • Retourner au profil
  • Voir le menu déroulant disparaître et l’en-tête “mode sombre” ainsi que la case à cocher apparaître

Contrôlé par showDarkColorSchemeSelector et showDarkModeToggle dans interface.hbs. Voir aussi le commentaire dans interface.js

  @discourseComputed("userSelectableDarkColorSchemes")
  showDarkColorSchemeSelector(darkSchemes) {
    // quand un schéma sombre par défaut est défini
    // le menu déroulant a deux éléments (désactiver / utiliser le défaut du site)
    // mais nous affichons une case à cocher dans ce cas
    const minToShow = this.defaultDarkSchemeId > 0 ? 2 : 1;
    return darkSchemes && darkSchemes.length > minToShow;
  },

2 « J'aime »

:star_struck: Merci pour cette réponse détaillée. Je n’autorisais que la sélection de ces thèmes sombres, je vais maintenant faire des tests en supprimant complètement ces thèmes.

1 « J'aime »

Oui, c’est un bon cas limite que vous avez trouvé. Ce bouton ne fonctionnera dans ce scénario que si l’utilisateur a également activé cette préférence personnelle discourse-core.

Nous allons travailler pour que cela fonctionne également dans ce cas.

4 « J'aime »