Comment faire en sorte que le thème sombre automatique soit identique au thème sombre sélectionné ?

Nous avons un thème sombre qui ressemble à ceci :

Lorsque nous sélectionnons le thème dans le profil de l’utilisateur, il ressemble à ce qui précède, comme prévu.

Cependant, lorsqu’il est activé automatiquement via l’option de profil « Activer le schéma de couleurs du mode sombre automatique », il ressemble à ceci :

Cela rend la majeure partie de l’interface sombre, mais elle utilise le CSS du thème clair, ce qui fait que l’en-tête ressemble à ceci.

Y a-t-il un moyen de faire en sorte que Discourse sélectionne strictement le thème sombre, y compris le CSS, etc., lorsqu’il est sélectionné automatiquement ?


Pour information, voici nos options de thème clair :

Et les options du thème sombre :

3 « J'aime »

Il semble que vous utilisiez 2 palettes de couleurs différentes. Joplin par défaut et Simple Dark. Sont-elles différentes ?

3 « J'aime »

Oui, le thème par défaut avec le thème de couleur par défaut de Joplin est le thème clair, et l’autre est le thème sombre. Je suppose qu’il est normal qu’ils aient deux thèmes de couleur différents ?

2 « J'aime »

Mes excuses ! C’est une zone confuse de notre interface d’administration, et nous travaillons actuellement à l’améliorer. J’espère que je vais bien expliquer, mais laissez-moi vous décrire la fonctionnalité actuelle à ma manière.

Un changement est que nous commençons à parler uniquement de « palette de couleurs » et non plus de « schéma de couleurs ». Cela changera bientôt dans l’interface utilisateur. Pour l’instant, palette et schéma sont la même chose.

Pour utiliser la prise en charge du mode sombre dans Discourse, j’ai eu les meilleurs résultats avec les éléments suivants :

  • n’avoir qu’un seul thème activé
  • spécifier la palette de couleurs du mode clair dans les paramètres du thème activé
  • spécifier la palette de couleurs du mode sombre dans le paramètre du site default dark mode color scheme id.
  • le réglage du système d’exploitation en mode sombre de vos membres est respecté
  • le composant de thème de basculement du mode sombre fonctionne pour basculer entre le mode clair/sombre
  • vos membres peuvent voir les options de mode clair et sombre dans leurs préférences utilisateur (et ne voient pas le sélecteur de thème car il n’y a qu’un seul thème)

Si vous avez personnalisé votre thème sombre au-delà de la palette de couleurs utilisée et que vous ne voulez pas que les gens utilisent le thème en mode clair avec des couleurs sombres, alors vous ne pouvez pas utiliser le sélecteur de mode sombre. Vous devriez :

  • avoir deux thèmes activés
  • le thème en mode clair a des couleurs claires
  • le thème en mode sombre a des couleurs sombres
  • le paramètre default dark mode color scheme id n’est pas spécifié
  • le réglage du système d’exploitation en mode sombre de vos membres N’EST PAS respecté
  • le composant de thème de basculement du mode sombre ne fonctionne pas
  • dans leurs préférences utilisateur, vos membres peuvent choisir leur thème préféré

Et enfin, si vous ne voulez qu’un seul thème clair ou sombre, activez simplement un thème et une palette, et ne spécifiez aucune palette dans le paramètre du site default dark mode color scheme id.

4 « J'aime »

Merci pour votre réponse. Nous avons en fait trois thèmes différents, et deux d’entre eux sont personnalisés avec du CSS (pour changer l’en-tête pour Halloween, Noël). Donc, si je comprends bien, avec cette configuration, il n’est pas possible d’obtenir un thème sombre automatique qui fonctionne correctement, est-ce exact ?

Ce n’est pas idéal, mais je suppose que je pourrais vivre avec cela. Peut-être devons-nous changer nos en-têtes afin que l’en-tête en mode clair fonctionne aussi en mode sombre.

2 « J'aime »

Non, si vous n’offrez pas de palettes de couleurs claires et sombres. Oui, si vous le faites.

2 « J'aime »

J’ai plusieurs palettes de couleurs, les principales étant « Joplin Default » (utilisée dans le thème clair par défaut) et « Simple Dark » (utilisée dans le thème sombre par défaut).

Y a-t-il quelque chose que je doive configurer ici pour résoudre le problème que j’ai mentionné dans le message principal ?

Indiquez quelles sont les palettes de couleurs par défaut pour le clair et le sombre dans les paramètres d’un forum. Définissez le clair par défaut dans les paramètres des thèmes. Commencez à utiliser le sélecteur. C’est tout.
Les difficultés commencent lorsqu’un utilisateur modifie les palettes de couleurs dans les paramètres personnels. C’est… un système horrible, c’est trop, mais c’est un système difficile à comprendre. Et mon opinion est que nous avons trop de solutions de repli avec les paramètres de couleurs qui sont ici, là et partout. Les palettes ne devraient être définies que dans les thèmes. Bien sûr, cela limite les options de l’utilisateur pour choisir les couleurs, mais…

2 « J'aime »

Comment avez-vous personnalisé l’en-tête ? Le problème est que votre personnalisation de l’en-tête dépend du thème sélectionné, mais le sélecteur jour/nuit ne fait que changer la palette de couleurs. Le résultat est le même si vous sélectionnez la palette sombre en combinaison avec le thème clair dans vos préférences.

La Bannière Polyvalente utilise différentes images d’arrière-plan et couleurs selon qu’une palette de couleurs claire ou sombre est active. Vous pourriez faire quelque chose de similaire pour votre en-tête.

Oui, l’en-tête est bien défini via le CSS personnalisé de chaque thème. Y a-t-il un moyen d’identifier si la palette de couleurs actuelle est sombre ou claire ?

J’ai essayé ceci :

@media (prefers-color-scheme: dark) {
  .d-header {
    background-image: url(https://imgur.com/LdcvIcp.png); /* Image de fond sombre */
  }
}

Mais cela n’a pas fonctionné alors que la palette de couleurs sombre était active, et pour être sûr, j’ai essayé la même chose avec @media (prefers-color-scheme: light) et cela fonctionne. Il semble donc que la palette de couleurs sombre s’identifie comme un schéma de couleurs clair d’une manière ou d’une autre ? Y a-t-il un autre moyen de savoir que la palette de couleurs actuelle est la sombre ?

J’ai regardé le HTML et cherché “dark” mais rien d’utile n’est apparu. J’espérais qu’il y ait un sélecteur supérieur comme .is-dark-theme qui me le dirait.

1 « J'aime »

La façon dont la bannière polyvalente change l’arrière-plan fonctionne-t-elle ? Vous pourriez installer le composant, ajouter une image d’arrière-plan pour le mode sombre et essayer en utilisant l’aperçu.

Ensuite, vous pourriez utiliser dark-light-choose qui a été par exemple expliqué dans Update themes and plugins to support automatic dark mode - #5 by pmusaraj et est également utilisé pour la bannière.

2 « J'aime »