Comment changer un élément css en fonction du mode sombre ou clair ?clair?

[jordan-violet]

Je n’ai pas trouvé de réponse définitive en cherchant, mais je veux changer un élément CSS d’une manière pour le mode sombre et d’une autre pour le mode clair.

Quelle est la meilleure façon d’y parvenir dans Discourse ?

[Lilly (Lillian Louis)]

Je suspecte que ce sujet peut vous aider.

Use color scheme color if dark scheme, otherwise use my color in theme

I want to do something like this .some-link { @if var(--scheme-type) == 'dark' { color: var(--primary); } @else { color: #3b5998; } but of course it is not possible because there is no if in CSS and SCSS is not processed at runtime. And as far as I can see Discourse does not add any classes to indicate whether the dark scheme is active, and CSS does not allow custom properties in selectors. Any ideas what could be the best workaround?

[jordan-violet]

Je ne pense pas pouvoir modifier color_definitions.css car je suis un client d’entreprise hébergé par CDCK. Je suppose que je devrai les contacter à ce sujet alors.

Merci, Lilly !

[Lilly (Lillian Louis)]

je pense que vous pouvez le remplacer par votre propre CSS dans un autre thème ou composant je ne suis pas sûr du fonctionnement, je vais donc expérimenter aujourd’hui et voir si je peux trouver un CSS conditionnel pour les modes sombre et clair. Je pense que cela devrait être possible.

[Lilly (Lillian Louis)]

@jordan-violet

Je veux changer un élément CSS

quel est l’élément CSS que vous souhaitez modifier en fonction du mode sombre/clair ?

vous pouvez ajouter des définitions de couleur à l’onglet de définitions de couleur de l’édition CSS/HTML d’un thème (feuille de style color_definitions).

[jordan-violet]

Désolé pour ma réponse tardive ! Je cherchais à changer la couleur de la barre mise en surbrillance* en haut d’une réponse d’expert dans un sujet, mais je voulais mettre en surbrillance la barre avec une couleur différente pour le thème clair et le thème sombre.

[Lilly (Lillian Louis)]

@jordan-violet

barre flétrie

Je ne suis pas sûr de comprendre ? Pouvez-vous fournir une capture d’écran ?

[jordan-violet]

Surligné désolé, faute de frappe sur mobile !

[manuel (Manuel Kostka)]

@Lilly

Je vais jouer avec aujourd’hui et voir si je peux trouver un CSS conditionnel mode sombre - mode clair. Je pense que cela devrait être possible.

J’adorerais avoir tort, mais je pense qu’il n’y a pas de vérification fiable que vous puissiez utiliser avec CSS.

@sp-jordan-violet, la meilleure approche consiste généralement à utiliser des variables de couleur de vos thèmes de couleurs sombre et clair. Vous pouvez vérifier vos valeurs actuelles à l’aide de l’inspecteur du navigateur. Je crois que vous ne pouvez pas ajouter de nouvelles variables qui changent en fonction du schéma de couleurs. Mais il y a pas mal de variables parmi lesquelles choisir et vous pouvez les utiliser dans n’importe quelle déclaration personnalisée. Par exemple :

.topic-avatar {
  height: unset;
  align-self: stretch;
  background-image: linear-gradient(
      to right,
      transparent -40%,
      var(--secondary) 80%
    ),
    linear-gradient(
      to bottom,
      var(--tertiary-300) 0%,
      var(--highlight) 50%,
      var(--quaternary-low) 100%
    );
}

pourrait vous donner une mise en surbrillance de publication comme celle-ci :arc-en-ciel:

[Lilly (Lillian Louis)]

@manuel

J’adorerais qu’on me prouve le contraire, mais je pense qu’il n’y a pas de vérification fiable que vous pourriez utiliser avec CSS.

oui, j’ai tendance à être d’accord. j’ai aussi bricolé une solution javascript / css mais rien ne fonctionne encore

[jordan-violet]

Woah, j’aime vraiment cette idée !!

[Lilly (Lillian Louis)]

Ça a l’air vraiment cool. Beau travail