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

**URL:** https://meta.discourse.org/t/how-do-colors-work-and-how-to-change-them/358122
**Category:** Support
**Tags:** ux
**Created:** [20.Март.2025 10:12:15 UTC](https://meta.discourse.org/t/how-do-colors-work-and-how-to-change-them/358122 "2025-03-20T10:12:15Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![pHneutre](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/phneutre/32/326831_2.png) [@pHneutre](https://meta.discourse.org/u/pHneutre)
#### Post date: [20.Март.2025 10:12:15 UTC](https://meta.discourse.org/t/how-do-colors-work-and-how-to-change-them/358122/1 "2025-03-20T10:12:15Z")

</div>

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

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

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

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

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

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [20.Март.2025 11:15:01 UTC](https://meta.discourse.org/t/how-do-colors-work-and-how-to-change-them/358122/3 "2025-03-20T11:15:01Z")

</div>

> [@pHneutre](#):
>
> Но потом я теряюсь, потому что вижу такие вещи, как `var(--primary-low)`, и не понимаю, где они определены

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

> <https://github.com/discourse/discourse/blob/main/app/assets/stylesheets/common/foundation/color_transformations.scss>

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

> <https://github.com/discourse/discourse/blob/main/app/assets/stylesheets/color_definitions.scss>

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

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

```

Однако я не знаю, как использовать [функции преобразования цвета](https://github.com/discourse/discourse/blob/main/app/assets/stylesheets/common/foundation/variables.scss), которые требуют переменных SCSS.

Я вижу, что `@import "common/foundation/variables";` не требуется, так как [“базовые переменные и переменные темы теперь внедряются до компиляции любого SCSS-файла”](https://meta.discourse.org/t/enhanced-category-box-display-component/156954/7?u=canapin), но мне всё равно не удалось заставить это работать. Передаю микрофон более опытным пользователям 🎤

---

<div class="post-metadata">

### Author: ![ondrej](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ondrej/32/198804_2.png) [@ondrej](https://meta.discourse.org/u/ondrej)
#### Post date: [20.Март.2025 13:13:31 UTC](https://meta.discourse.org/t/how-do-colors-work-and-how-to-change-them/358122/4 "2025-03-20T13:13:31Z")

</div>

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

> [@pHneutre](#):
>
> Откройте инструменты разработчика и попробуйте найти соответствующие CSS-стили.

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

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

---

<div class="post-metadata">

### Author: ![pHneutre](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/phneutre/32/326831_2.png) [@pHneutre](https://meta.discourse.org/u/pHneutre)
#### Post date: [20.Март.2025 13:24:40 UTC](https://meta.discourse.org/t/how-do-colors-work-and-how-to-change-them/358122/5 "2025-03-20T13:24:40Z")

</div>

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

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [20.Март.2025 13:37:29 UTC](https://meta.discourse.org/t/how-do-colors-work-and-how-to-change-them/358122/6 "2025-03-20T13:37:29Z")

</div>

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

> [@Canapin](#):
>
> ```plaintext
> :root {
> --primary-high: red;
> }
> 
> ```

Однако вы также можете переопределить цвета в файле about.json темы, как описано здесь: [Override values for auto-generated color variables](https://meta.discourse.org/t/override-values-for-auto-generated-color-variables/134374)

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [19.Апрель.2025 13:37:39 UTC](https://meta.discourse.org/t/how-do-colors-work-and-how-to-change-them/358122/7 "2025-04-19T13:37:39Z")

</div>

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