Wie funktionieren Farben und wie kann man sie ändern?

pHneutre · 20. März 2025 um 10:12

Entschuldigung für das breite Thema, aber ich habe darüber nachgedacht und kann kein passendes Tutorial oder keine Erklärung finden.

Immer wenn ich eine Farbe irgendwo in Discourse ändern muss, folge ich diesem Pfad:

Wird die Farbe von einer Theme-Komponente verwaltet? Wenn nicht,
Scheint sie von /admin/customize/colors verwaltet zu werden? Wenn nicht,
Öffne die Entwicklertools und versuche, das passende CSS zu finden.

Aber dann bin ich verloren, weil ich Dinge wie var(--primary-low) finde und keine Ahnung habe, wo diese definiert sind, obwohl sie mit dem Begriff der Primärfarbe in /admin/customize/colors zusammenzuhängen scheinen. Also:

Wie sind diese var()-Dinge definiert?
Was ist der empfohlene Weg, sie konsistent zu ändern?

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

Die Farben sind hier (berechnet):

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

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

ondrej · 20. März 2025 um 13:13

Sie können den Styleguide überprüfen

Sie können auch /styleguide/atoms/colors für Farben überprüfen. Sie müssen dies in Ihren Website-Einstellungen aktivieren, indem Sie nach ‘styleguide’ suchen.

Zum Beispiel: https://meta.discourse.org/styleguide/atoms/colors

pHneutre · 20. März 2025 um 13:24

Wow, zum ersten Mal höre ich von Styleguide, danke.
Ich verstehe also, dass benutzerdefiniertes CSS der einzige Weg ist, diese Stile zu ändern, wie @Canapin sagte, richtig? ( zum Bestätigen, wenn Sie möchten)

awesomerobot · 20. März 2025 um 13:37

Diese Methode ist wahrscheinlich die einfachste und funktioniert für alle automatisch generierten Farben

aber Sie können Farben auch in der about.json-Datei eines Themes überschreiben, wie hier beschrieben Override values for auto-generated color variables

system · 19. April 2025 um 13:37

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

Thema		Antworten	Aufrufe
Use Discourse Core Variables in your Theme Developer Guides how-to , theme-guides	0	11859	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	166	5. August 2025
Reference for full color customization Dev	4	1307	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