Comment fonctionnent les couleurs et comment les changer ?

pHneutre · Mars 20, 2025, 10:12

Désolé pour le sujet général, mais j’ai réfléchi à cela et je ne trouve pas de tutoriel ou même d’explication appropriée.

Chaque fois que je dois changer une couleur n’importe où sur Discourse, je suis ce chemin :

La couleur est-elle gérée par un composant de thème ? Sinon,
Semble-t-elle être gérée par /admin/customize/colors ? Sinon,
Ouvrez les outils de développement et essayez de trouver le CSS correspondant.

Mais ensuite, je suis perdu car je trouve des choses comme var(--primary-low) et je n’ai aucune idée d’où elles sont définies, bien qu’elles semblent liées à la notion de couleur primaire dans /admin/customize/colors. Donc :

Comment ces choses var() sont-elles définies ?
Quelle est la méthode recommandée pour les modifier de manière cohérente ?

Canapin · Mars 20, 2025, 11:15

Les couleurs sont (calculées) ici :

github.com/discourse/discourse

app/assets/stylesheets/common/foundation/color_transformations.scss

main

// standard color transformations, use these if possible, and add any new dark-light-diffs here
// any variables defined here can be added in theme color schemes
// all variables should have the !default flag

@use "sass:string";

// primary
$primary-very-low: dark-light-diff($primary, $secondary, 97%, -82%) !default;
$primary-low: dark-light-diff($primary, $secondary, 90%, -78%) !default;
$primary-low-mid: dark-light-diff($primary, $secondary, 70%, -45%) !default;
$primary-medium: dark-light-diff($primary, $secondary, 50%, -35%) !default;
$primary-high: dark-light-diff($primary, $secondary, 30%, -25%) !default;
$primary-very-high: dark-light-diff($primary, $secondary, 15%, -10%) !default;

// primary-numbers
$primary-50: dark-light-diff($primary, $secondary, 97%, -82%) !default;
$primary-100: dark-light-diff($primary, $secondary, 94%, -80%) !default;
$primary-200: dark-light-diff($primary, $secondary, 90%, -78%) !default;
$primary-300: dark-light-diff($primary, $secondary, 80%, -60%) !default;
$primary-400: dark-light-diff($primary, $secondary, 70%, -45%) !default;

This file has been truncated. show original

Les variables CSS sont définies ici :

github.com/discourse/discourse

app/assets/stylesheets/color_definitions.scss

main

// This file maps all SCSS color variables to CSS custom properties.
// It is compiled to CSS separately from the rest of the app.
// The source variables come from color_transformations.scss and variables.scss
:root {
  color-scheme: #{schemeType()};

  --scheme-type: #{schemeType()};
  --primary: #{$primary};
  --secondary: #{$secondary};
  --tertiary: #{$tertiary};
  --quaternary: #{$quaternary};
  --header_background: #{$header_background};
  --header_primary: #{$header_primary};
  --highlight: #{$highlight};
  --danger: #{$danger};
  --success: #{$success};
  --love: #{$love};
  --d-selected: #{$selected};
  --d-hover: #{$hover};
  --always-black-rgb: 0, 0, 0;

This file has been truncated. show original

Si vous voulez remplacer, disons, --primary-medium, vous pouvez ajouter ceci à votre thème :

:root {
    --primary-high: red;
}

Cependant, je ne sais pas comment utiliser les fonctions de transformation de couleur, qui nécessitent des variables SCSS.

Je vois que @import "common/foundation/variables"; n’est pas requis car “les variables de base et de thème sont maintenant injectées avant la compilation de tout fichier SCSS”, mais je n’ai pas réussi à le faire fonctionner. Je passe le micro à des utilisateurs plus compétents

ondrej · Mars 20, 2025, 1:13

Vous pouvez consulter le guide de style

Vous pouvez également consulter /styleguide/atoms/colors pour les couleurs. Vous devez l’activer dans les paramètres de votre site en recherchant « styleguide »

Par exemple : https://meta.discourse.org/styleguide/atoms/colors

pHneutre · Mars 20, 2025, 1:24

Wow, c’est la première fois que j’entends parler de guide de style, merci.
Donc, si je comprends bien, le CSS personnalisé est le seul moyen de modifier ces styles, comme l’a dit @Canapin, n’est-ce pas ? ( pour confirmer si vous le souhaitez)

awesomerobot · Mars 20, 2025, 1:37

Cette méthode est probablement la plus simple, elle fonctionnera pour toutes les couleurs générées automatiquement

mais vous pouvez également remplacer les couleurs dans le fichier about.json d’un thème, comme décrit ici Override values for auto-generated color variables

system · Avril 19, 2025, 1:37

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

Sujet		Réponses	Vues
Use Discourse Core Variables in your Theme Developer Guides how-to , theme-guides	0	11861	Janvier 9, 2018
Referencing Discourse theme color variables in custom theme component? Support css	4	72	Avril 20, 2025
Styling Discourse with variables: Show & Tell Dev dev-news	1	168	Août 5, 2025
Reference for full color customization Dev	4	1311	Février 14, 2023
Challenges creating a custom color palette Dev	8	149	Janvier 29, 2025

Comment fonctionnent les couleurs et comment les changer ?

Sujets connexes