Comment ajouter une classe de corps spécifique pour le mode sombre (ou clair) ?

Il ne semble pas y avoir de classe spécifique actuellement.

J’ai trouvé ceci mais cela ne fonctionne pas car l’ID du thème est le même pour le mode sombre et le mode clair (ce qui est défini par le schéma de couleurs, je suppose).

Je suppose qu’un petit script pourrait aider ? Et, peut-être ajouter cela au cœur de Discourse ?

Pourriez-vous expliquer pourquoi vous avez besoin de classes spécifiques ajoutées au corps pour le mode sombre ou clair ?

Cette fonctionnalité principale ne permet-elle pas ce dont vous avez besoin ?

Le personnel du forum que je migre n’aime pas une variable de couleur générée spécifique (--tertiary-very-low) qui donne cette couleur brunâtre spécifique :

Ils aimeraient l’ajuster, et il semble que je ne puisse pas vraiment la modifier car elle est générée ET il n’y a pas de classe spécifique au parent pour le mode sombre.

Cependant, je suis tombé sur cette information :

Je ne sais pas si c’est valable, je n’ai pas encore pu l’essayer, trop de choses à faire en ce moment :sweat_smile:. Mais si ça marche, ce sera suffisant. Ce serait même encore mieux, en fait.

2 « J'aime »

Nous (désolé, je dirai nous car je suis avec @Canapin en train de faire les ajustements sur notre forum) avons créé un thème sombre en utilisant le préréglage appelé « Café crème » dans la version française de Discourse (« coffee » je suppose) et nous venons de changer la couleur du :heart: en rouge au lieu de marron.
La chose étrange avec ce thème est que les hyperliens ont presque la même couleur que le texte.
Donc, lorsqu’ils sont un lien intégré, on peut à peine les voir :


(oui, les deux derniers mots « cliquez-ici » sont un lien vers une page web…)

Notre idée était donc de les rendre un peu marron, pour qu’ils ressortent. Mais lorsque nous ajustons le réglage quaternary dans la palette de couleurs, un tas de couleurs changent en même temps : l’arrière-plan de la « bulle » derrière le DM change pour quelque chose de plus proche de la crotte d’oiseau que du marron montré dans le premier message de @Canapin. La boîte de message supérieure change aussi (la boîte « le courrier sortant a été désactivé ») pour cette même couleur de crotte d’oiseau.

L’idée était donc d’abord d’utiliser le css pour colorer les hyperliens, mais nous n’avons pas encore trouvé comment faire.

1 « J'aime »

Utiliser .cooked a comme cible CSS devrait vous permettre de définir une couleur personnalisée pour ces liens.

Bien que notre système principal permette désormais d’utiliser des choix de schémas de couleurs sombres/clairs pour leurs modes correspondants, vous devriez également pouvoir utiliser la requête média CSS pour les modes sombres/clairs comme ceci :

1 « J'aime »
@media (prefers-color-scheme: dark) {
    .cooked a, .d-editor-preview a {
        color: var(--primary-low-mid);
    }
}

Ça a fonctionné. Merci !

Oups.
Non, ça n’a pas fonctionné.

Veuillez me corriger si je me trompe. prefers-color-scheme est basé sur la préférence de l’appareil, et non sur le thème Discourse réellement sélectionné ?

Sur mon appareil Windows, j’ai défini un thème sombre. Donc, les sites Web qui utilisent la préférence de mon appareil afficheront, si possible, un thème sombre.

Mais sur mon forum, j’ai délibérément choisi d’utiliser un thème clair, pas un thème sombre.

La requête média prefers-color-scheme est toujours chargée bien que j’utilise un thème clair :

Thème clair, pas de mode sombre,

Pourtant, la règle pour le thème sombre s’applique néanmoins :

Plein écran :

1 « J'aime »

Désolé, j’avais mal compris que vous faisiez référence aux paramètres système du mode sombre, activant le mode sombre sur le forum.

Utilisez-vous donc personnellement le schéma de couleurs claires, mais vos utilisateurs utilisent-ils le schéma de couleurs sombres ?
La capture d’écran précédente montrait le schéma de couleurs sombres en action, mais votre réponse récente indique que vous utilisez le schéma de couleurs claires.

Salut, désolé, oui ce n’est pas clair, d’autant plus que je parlais de deux choses de même nature mais sur des schémas de couleurs différents. De plus, c’était un peu déroutant pour moi.

Ma question serait donc : sur Discourse, comment savoir quel schéma de couleurs est utilisé, indépendamment des préférences du mode sombre/clair de l’appareil ?

Si je comprends bien les choses :
Si mon appareil (Windows 10) est réglé sur le mode sombre, mais que je sélectionne un schéma de couleurs clair dans Discourse, la media query (prefers-color-scheme: dark) dans le CSS de mon forum renverra de toute façon une sorte de « vrai » et mes règles imbriquées seront appliquées, bien que j’aie choisi un schéma de couleurs clair sur mon forum (même si Windows est réglé sur le mode sombre).

Donc : comment savoir, dans le code HTML de Discourse, si j’utilise actuellement un schéma de couleurs clair ou sombre ? Je n’ai trouvé aucune classe parente comme « light-color-scheme » ou « dark-color-scheme ». Je ne peux donc pas différencier/cibler des schémas de couleurs spécifiques en CSS et créer des règles uniquement pour l’un ou l’autre.

1 « J'aime »

Merci pour ces précisions, je comprends maintenant.

Nous n’ajoutons aucune classe au corps en fonction du thème actuellement sélectionné par l’utilisateur.

Si je peux me permettre d’approfondir, est-ce que la raison est que vous n’aimez pas la couleur que nos fonctions de couleur génèrent pour --tertiary dans votre thème sombre actuellement sélectionné ?

Qu’aimeriez-vous accomplir avec une classe de corps que vous avez l’impression de ne pas pouvoir faire actuellement ?

Yup, exactement :slight_smile:

Maintenant que je lis cette question… je ne suis pas sûr, car la seule façon de remplacer une couleur générée, pour autant que je sache, est

:root {
  --primary-medium: #666666;
}

Mais étant un sélecteur racine, une classe sur l’élément html ou body ne pourrait pas cibler un schéma de couleurs avant :root.
Alors… je ne sais pas.

Mais en bref, l’idée serait de changer une couleur générée spécifique pour un schéma de couleurs spécifique. :person_shrugging:

Ce n’est pas grave si ce n’est pas possible cependant. Nous avons fait quelques expériences avec nos couleurs de schéma et nous sommes actuellement suffisamment satisfaits des couleurs générées. :slight_smile: Ça pourrait être mieux, mais ce n’est pas un gros problème. :slight_smile:

1 « J'aime »

Si vous le souhaitez, il existe une sorte de solution de contournement cachée.

Vous pouvez créer un dossier et y ajouter uniquement un fichier about.json.

Je l’ai fait pour créer un schéma de couleurs solarized light, car je voulais spécifier mes propres variantes, plutôt que de m’appuyer sur les fonctions de couleur intégrées.

Voici le fichier about.json que j’ai créé.

Vous installeriez ensuite ce « thème », qui installerait ce schéma de couleurs sur votre forum. À ce stade, vous pourriez le rendre disponible pour une utilisation sur d’autres thèmes également.

{
  "name": "Solarized Light",
  "component": false,
  "license_url": null,
  "about_url": null,
  "authors": null,
  "theme_version": null,
  "minimum_discourse_version": null,
  "maximum_discourse_version": null,
  "assets": {
  },
  "color_schemes": {
    "Solarized Light": {
      "primary": "002B36",
      "primary-high": "4C6869",
      "primary-medium": "7E918C",
      "primary-low-mid": "A4AFA5",
      "primary-low": "D6D8C7",
      "primary-very-low": "F0ECD7",
      "secondary": "FCF6E1",
      "secondary-very-high": "E8E6D3",
      "secondary-high": "97A59D",
      "secondary-medium": "6C8280",
      "secondary-low": "325458",
      "tertiary": "0088cc",
      "tertiary-high": "329ED0",
      "tertiary-medium": "7EBFD7",
      "tertiary-low": "D6E6DE",
      "quaternary": "e45735",
      "header_background": "FCF6E1",
      "header_primary": "002B36",
      "highlight": "ffff4d",
      "highlight-high": "BCAA7F",
      "highlight-medium": "E3D0A3",
      "highlight-low": "FDF9AD",
      "danger": "e45735",
      "danger-low": "F8D9C2",
      "success": "009900",
      "success-medium": "4CB544",
      "success-low": "CFE5B9",
      "love": "fa6c8d",
      "love-low": "FCDDD2"
    }
  },
  "modifiers": {
  },
  "learn_more": "https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966"
}
2 « J'aime »

Je me souviens l’avoir vu il y a longtemps, quand je travaillais plus en profondeur sur mes installations Discourse !

Certainement une bonne solution de contournement. Merci. Je considérerai cela comme la solution appropriée, même si elle peut être considérée comme un peu bancale.

1 « J'aime »

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.