Как работают цвета и как их изменить?

pHneutre · 20.Март.2025 10:12:15

Извините за широкий вопрос, но я уже давно ломаю голову над этим и не могу найти ни подходящего руководства, ни даже объяснения.

Всякий раз, когда мне нужно изменить цвет где-либо в Discourse, я следую этому пути:

Управляется ли цвет компонентом темы? Если нет,
Похоже ли, что он управляется через /admin/customize/colors? Если нет,
Откройте инструменты разработчика и попробуйте найти соответствующий CSS.

Но затем я теряюсь, потому что нахожу такие вещи, как var(--primary-low), и не имею ни малейшего представления, где они определены, хотя они выглядят связанными с понятием основного цвета в /admin/customize/colors. Так что:

Как определяются эти элементы var()?
Какой рекомендуемый способ их последовательного изменения?

Canapin · 20.Март.2025 11:15:01

Цвета (вычисляются) здесь:

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

CSS-переменные определены здесь:

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-selected-hover: #{$selected-hover};
  --d-hover: #{$hover};

This file has been truncated. show original

Если вы хотите переопределить, скажем, --primary-medium, добавьте это в вашу тему:

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

Однако я не знаю, как использовать функции преобразования цвета, которые требуют переменных SCSS.

Я вижу, что @import "common/foundation/variables"; не требуется, так как “базовые переменные и переменные темы теперь внедряются до компиляции любого SCSS-файла”, но мне всё равно не удалось заставить это работать. Передаю микрофон более опытным пользователям

ondrej · 20.Март.2025 13:13:31

Вы можете ознакомиться со справочником стилей.

Также вы можете проверить раздел /styleguide/atoms/colors для получения информации о цветах. Для этого необходимо включить его в настройках вашего сайта, выполнив поиск по запросу ‘styleguide’.

Например: https://meta.discourse.org/styleguide/atoms/colors

pHneutre · 20.Март.2025 13:24:40

Вау, впервые слышу о гайде по стилям, спасибо.
Правильно ли я понимаю, что, как сказал @Canapin, кастомный CSS — это единственный способ изменить эти стили? ( для подтверждения, если хотите)

awesomerobot · 20.Март.2025 13:37:29

Этот метод, вероятно, самый простой — он подойдёт для любых автоматически сгенерированных цветов.

Однако вы также можете переопределить цвета в файле about.json темы, как описано здесь: Override values for auto-generated color variables

Тема		Ответов	Просм.
Use Discourse Core Variables in your Theme Developer Guides how-to , theme-guides	0	12056	09.01.2018
Referencing Discourse theme color variables in custom theme component? Support css	4	115	20.04.2025
Styling Discourse with variables: Show & Tell Development dev-news	1	259	05.08.2025
Reference for full color customization Development	4	1404	14.02.2023
Challenges creating a custom color palette Development	8	244	29.01.2025

Как работают цвета и как их изменить?

Связанные темы