Справочник по полной настройке цветов

Разработка
1

Я хочу создать две собственные цветовые схемы, где я выбираю все переменные цветов (мне не нравятся вычисленные/трансформированные значения).

Есть ли по этому вопросу какая-либо справочная информация? Пример файла JSON в этом посте:

содержит лишь несколько значений (похоже, это те, которые по умолчанию настраиваются через панель администратора). В то же время некоторые цветовые схемы, которые я видел, например, схемы WCAG, предоставляют доступ к большему числу переменных.

В этом посте говорилось о создании плагина для расширенной настройки цветов: Customizing colors - #10 by awesomerobot

Но я не думаю, что это необходимо, если бы существовал справочный файл JSON со всеми именованными переменными цветов, которые можно переопределить, минуя вычисленные значения.

2

Когда вы просматриваете экземпляр дискурса в браузере, вы можете найти все имена корневых переменных на вкладке «Styles»:

image
image394×1320 110 KB

Затем просто объявите дополнительные переменные в вашем JSON-файле. Например:

{
  "about_url": null,
  "license_url": null,
  "name": "Full Color Schemes",
  "color_schemes": {
    "Colors Light": {
      "primary": "222",
      "secondary": "fff",
      "tertiary": "08c",
      "quaternary": "e45735",
      "header_background": "fff",
      "header_primary": "333",
      "highlight": "ffff4d",
      "danger": "c80001",
      "success": "090",
      "love": "fa6c8d",
      "primary-very-low": "f8f8f8",
      "primary-low": "e9e9e9",
      "primary-low-mid": "bdbdbd",
      "primary-medium": "919191",
      "primary-high": "646464",
      "primary-very-high": "434343",
      "secondary-low": "4d4d4d",
      "secondary-medium": "gray",
      "secondary-high": "a6a6a6",
      "secondary-very-high": "ededed"
    },
    "Colors Dark": {
      "primary": "ddd",
      "secondary": "222",
      "tertiary": "0f82af",
      "quaternary": "c14924",
      "header_background": "111",
      "header_primary": "ddd",
      "highlight": "a87137",
      "danger": "e45735",
      "success": "1ca551",
      "love": "fa6c8d",
      "primary-very-low": "282828",
      "primary-low": "313131",
      "primary-low-mid": "7a7a7a",
      "primary-medium": "909090",
      "primary-high": "a6a6a6",
      "primary-very-high": "c7c7c7",
      "secondary-low": "bdbdbd",
      "secondary-medium": "919191",
      "secondary-high": "646464",
      "secondary-very-high": "313131"
    }
  }
}

Хорошая новость в том, что эти переменные затем также появятся на бэкенде:

image
image1632×1747 210 KB

3

Спасибо — после того как я опубликовал этот пост, я увидел, что всё это также указано на странице /styleguide > colors инстанса — полагаю, это полный список…

Теперь меня интересует, в чём разница между описательными (например, primary-high) и нумерованными (например, primary-800) переменными, и как учитывать это при создании собственной темы.

4

Насколько я знаю, это просто дополнительные, более точные вычисления, которые можно использовать в теме или компоненте темы. Однако они не используются в ядре Discourse.

Если вы хотите написать свою цветовую схему, используя только числовые значения, вы можете переопределить описательные значения в своей теме следующим образом:

:root {
  --primary-high: var(--primary-800);
}

Но в этом случае числовые значения существуют только для основных и третичных цветов.