Comment fonctionnent les couleurs et comment les changer ?

Canapin · Mars 20, 2025, 11:15

Les couleurs sont (calculées) ici :

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

Sujet		Réponses	Vues
Use Discourse Core Variables in your Theme Developer Guides how-to , theme-guides	0	11860	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