Сложности создания собственной цветовой палитры

mk0r · 27.Январь.2025 00:17:57

Я попытался создать полностью индивидуальную цветовую схему, определив свои цвета в файле about.json моей темы на GitHub.

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

Например, в моей JSON-схеме я определяю: "success_low": "DDE2B2",

Однако в моём гайде по стилям отображается другой (вычисленный) цвет для var(--success-low).

Я изучил все руководства, и, похоже, определения палитры в JSON используются не полностью; вместо этого Discourse вычисляет некоторые значения самостоятельно, игнорируя мои определения.

Мне нужно ли вместо этого прописать цвета жёстко в файле с переменными CSS? Перекроют ли они вычисленные значения? Где и как это следует сделать? Я хотел бы определить каждый цвет как для светлого, так и для тёмного режима в Discourse, так как мне не нравится ни одно из вычисленных значений.

Спасибо за любую помощь. Мне было очень сложно разобраться, как всё это работает, что имеет приоритет в итоговом CSS и так далее.

Обновление: этот пост, похоже, противоречит моим попыткам решения проблемы:

Это ещё больше запутало меня: почему Discourse всё ещё, кажется, автоматически генерирует цвета?

Lilly · 27.Январь.2025 00:43:09

Я вижу, что в первом случае (success_low) используется нижнее подчёркивание, а во втором (success-low) — дефис.

Вы всегда можете вставить здесь свою цветовую палитру в том виде, в котором она представлена в JSON-файле, чтобы мы могли её проверить.

mk0r · 27.Январь.2025 00:58:35

Спасибо, я проверю все случаи использования нижних подчеркиваний и дефисов. Есть ли где-нибудь справочный JSON-файл, содержащий список всех переменных с правильно расставленными дефисами и нижними подчеркиваниями?

mk0r · 27.Январь.2025 01:02:44

Я изначально использовал тему «solarized» в качестве эталона

mk0r · 27.Январь.2025 01:14:18

Это крайне запутанно. В гайдлайне по стилям именованные CSS-переменные используют дефисы:

В то время как в этой (и других) примерах схем используются нижние подчеркивания:

github.com/exodrifter/discourse-gruvbox

about.json

main

{
  "name" : "Gruvbox",
  "about_url" : "https://github.com/exodrifter/discourse-gruvbox",
  "license_url": "https://github.com/exodrifter/discourse-gruvbox/blob/master/LICENSE.md",
  "color_schemes": {
    "Gruvbox Light": {
      "primary": "3c3836",
      "secondary": "fbf1c7",
      "tertiary": "076678",
      "quaternary": "af3a03",
      "header_background": "f9f5d7",
      "header_primary": "282828",
      "highlight": "427b58",
      "danger": "9d0006",
      "success": "79740e",
      "love": "8f3f71",
      "primary_very_low": "fbf1c7",
      "primary_low": "d5c4a1",
      "primary_low_mid": "a89984",
      "primary_medium": "7c6f64",

This file has been truncated. show original

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

Очень трудно интуитивно понять всю логику использования цветов в светлом и тёмном режимах. Между множеством SCSS-файлов и трансформаций, JSON, административным GUI, палитрами, которые (в какой-то степени?) независимы от тем…

Извините за поток сознания, просто немного запутался здесь.

Lilly · 27.Январь.2025 01:30:21

У вас есть ещё одна старая тема, которая может помочь вам в этом

mk0r · 29.Январь.2025 01:26:55

К сожалению, та ветка не решила проблему.

Я всё ещё в замешательстве — нет ли чётких инструкций о том, как установить каждый цвет? И какие правильный синтаксис/имена используются в JSON по сравнению с CSS-переменными?

Lilly · 29.Январь.2025 01:47:09

Ты смотрел это?

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

В твоем файле about.json я не вижу ничего явно ошибочного, так что проблема может быть в конфигурации твоей темы.

Какие именно переменные работают, а какие нет?

Ты читал темы для разработчиков тем? Возможно, в твоем репозитории отсутствуют другие необходимые файлы темы.

mk0r · 29.Январь.2025 02:21:24

Да, я их читал, но не смог найти полного справочника по всем переменным цветов. Я основал свой файл about.json на теме «solarized», которая, похоже, объявляла все переменные. Я попробую начать заново с чистого листа, сообщу о результатах и воспользуюсь инструментами разработчика, чтобы выяснить, в чём может быть проблема.

Спасибо за помощь до сих пор.

Тема		Ответов	Просм.
Reference for full color customization Development	4	1403	14.02.2023
How do colors work and how to change them? Support ux	5	236	20.03.2025
How to add more options to color palettes? Support color-palettes	4	116	15.08.2025
Use Discourse Core Variables in your Theme Developer Guides how-to , theme-guides	0	12056	09.01.2018
Color definitions for more than light/dark color schemes Support	2	554	06.01.2024

Сложности создания собственной цветовой палитры

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