Wie funktionieren Farben und wie kann man sie ändern?

Canapin · 20. März 2025 um 11:15

Die Farben sind hier (berechnet):

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

Die CSS-Variablen sind hier definiert:

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

Wenn Sie zum Beispiel --primary-medium überschreiben möchten, können Sie dies zu Ihrem Theme hinzufügen:

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

Ich weiß jedoch nicht, wie ich die Farbtransformationsfunktionen verwenden kann, die SCSS-Variablen benötigen.

Ich sehe, dass @import "common/foundation/variables"; nicht erforderlich ist, da “Core- und Theme-Variablen werden jetzt injiziert, bevor eine SCSS-Datei kompiliert wird”, aber ich konnte es trotzdem nicht zum Laufen bringen. Ich gebe das Mikrofon an sachkundigere Benutzer weiter

Thema		Antworten	Aufrufe
Use Discourse Core Variables in your Theme Developer Guides how-to , theme-guides	0	11860	9. Januar 2018
Referencing Discourse theme color variables in custom theme component? Support css	4	72	20. April 2025
Styling Discourse with variables: Show & Tell Dev dev-news	1	168	5. August 2025
Reference for full color customization Dev	4	1311	14. Februar 2023
Challenges creating a custom color palette Dev	8	149	29. Januar 2025

Wie funktionieren Farben und wie kann man sie ändern?

Verwandte Themen