Как переопределить переменную цвета только для одной темы?

[Queth (Q)]

(извините, я не смог найти, куда это лучше всего подойдёт, выбрал раздел для разработчиков)

У меня есть три темы. В одной из тем вычисление $primary_low даёт цвет с недостаточным контрастом по отношению к фону. Я пробовал корректировать основной цвет (цвет фона изменить нельзя, так как это фирменный цвет), но безрезультатно. Либо контраст практически отсутствует, либо получается очень яркий эффект, что противоположно тому, что мне нужно.

Я думал, что решением будет просто присвоить значение цвета переменной $primary_low в CSS конкретной темы. Но это не срабатывает. Даже добавление !important не помогает. Есть ли способ изменить это только для одной темы? Примечание: это локальные темы.

[david (David Taylor)]

Ознакомьтесь с руководством от @awesomerobot здесь:

Override values for auto-generated color variables

As of v2.3.3 (released early September) you can now override our automatically-generated SASS color variables ($primary-low, $primary-medium, etc) in remote themes (you can not yet do this directly via the admin UI.) To override one of these colors you need to add it to the color_scheme section of your theme’s about.json file. Once you’ve done that you can see the override listed within your color scheme in /admin/customize/colors. "color_schemes": { “My_colors”: { "primary": "000000…

[Queth (Q)]

Ах, спасибо! К сожалению, это локальная тема, и она не будет удалённой.
Есть ли способ сделать это как-то иначе?

[david (David Taylor)]

Это считается продвинутой функцией, поэтому она недоступна в интерфейсе. Вы можете использовать CLI темы для «локальных тем».

[Queth (Q)]

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

Буду решать, что из этого я смогу сделать с моим уровнем знаний… Я полный нуб в GitHub, поэтому создание удалённой темы кажется очень пугающим. (Да, я прочитал руководство).

[smrtey]

Удалённые темы действительно очень просты. Я никогда раньше не пользовался GitHub и понятия не имел, что означает файл about.json, но уже использовал его для нескольких тем без каких-либо проблем. Вы просто создаёте локальную тему, загружаете её на GitHub, затем добавляете нужные данные в файл about.json на GitHub, и в результате получаете множество крутых настраиваемых опций для вашей темы, когда переустанавливаете её на своём сайте с GitHub.

У меня сегодня позже будет время написать пост с пошаговым руководством, и тогда всё быстро прояснится.

eta: lol Я думал о файле settings.yml, который тоже является большим преимуществом удалённых тем, но, посмотрев на ссылку Дэвида выше, вижу, что about.json ещё проще.

[smrtey]

Вот слишком подробные инструкции. Дайте знать, если что-то не работает, как описано.

1. Создайте аккаунт на GitHub, если у вас его ещё нет.

2. В Discourse экспортируйте вашу тему:
   Администрирование → Настройка → Выберите тему, которую хотите экспортировать
   

   
   
   Это сохранит тему в виде ZIP-файла на вашем компьютере.

3. Распакуйте файлы на вашем компьютере.

4. Перейдите на GitHub и создайте новый репозиторий:
   

   
   
   
   

5. Нажмите на «загрузить существующий файл»
   

   

6. Перетащите распакованные папки и файлы из экспортированной темы (что-то вроде):
   

   
   
   с вашего компьютера в репозиторий и нажмите «Commit Changes» (Зафиксировать изменения).

7. Теперь вы можете отредактировать файл about.json. Нажмите на имя файла.
   
   

Файл будет выглядеть примерно так:

{
  "name": "Default",
  "component": false,
  "license_url": null,
  "about_url": null,
  "authors": null,
  "theme_version": null,
  "minimum_discourse_version": null,
  "maximum_discourse_version": null,
  "assets": {
    "badge": "assets/badge.png"
  },
  "color_schemes": {
    "blue-light": {
      "primary": "22262a",
      "secondary": "fefefe",
      "tertiary": "2572e4",
      "quaternary": "518ee9",
      "header_background": "1550a7",
      "header_primary": "fcfcfc",
      "highlight": "9edaf5",
      "danger": "ff7114",
      "success": "85cc54",
      "love": "de0100"    
    }
  },
  "learn_more": "https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966"
}

8. Нажмите на иконку карандаша для редактирования.

Теперь вы можете его отредактировать. Я рекомендую изменить название цветовой схемы; в противном случае при повторном импорте темы на ваш сайт у вас окажется две разные цветовые схемы с одинаковым названием. Поэтому ниже я изменил "blue-light": { на "blue-lite": {

Просто добавьте ваши переопределения переменных цветов в конец цветовой схемы после love и убедитесь, что после значения love стоит запятая.

  "name": "Default",
  "component": false,
  "license_url": null,
  "about_url": null,
  "authors": null,
  "theme_version": null,
  "minimum_discourse_version": null,
  "maximum_discourse_version": null,
  "assets": {
    "badge": "assets/badge.png"
  },
  "color_schemes": {
    "blue-lite": {
      "primary": "22262a",
      "secondary": "fefefe",
      "tertiary": "2572e4",
      "quaternary": "518ee9",
      "header_background": "1550a7",
      "header_primary": "fcfcfc",
      "highlight": "9edaf5",
      "danger": "ff7114",
      "success": "85cc54",
      "love": "de0100",
      "primary-high": "333333",
      "primary-medium": "666666",
      "primary-low-mid": "999999",
      "primary-low": "cccccc"    
    }
  },
  "learn_more": "https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966"
}

9. Нажмите на «Commit Changes» (Зафиксировать изменения).

10. Нажмите на название репозитория, чтобы вернуться на главную страницу репозитория.
    

    

11. Скопируйте ссылку для клонирования или загрузки.
    

    

12. В Discourse импортируйте вашу тему:
    Администрирование → Настройка → Установка → Из git-репозитория: Вставьте ссылку и нажмите «Установить».
    

    

13. Теперь вы можете редактировать эту тему так же, как и любую локальную тему, используя ваши собственные значения $primary-high, $primary-medium, $primary-low-mid и $primary-low.

[Queth (Q)]

Огромное спасибо @smrtey за создание этого пошагового руководства! Сегодня у меня наконец-то нашлось время сесть и следовать ему. Всё сработало как по маслу!
Это были мои первые шаги на GitHub — я раньше никогда не создавал аккаунт или репозиторий. Ещё раз большое спасибо.

Возможно, это стоит включить в руководство по созданию тем или добавить ссылку на него?

[smrtey]

Отличная находка — пользовательские настройки. Вам нужно добавить файл settings.yml в репозиторий GitHub вашей темы или компонента. Вот пример компонента с настраиваемыми параметрами:

GitHub - oerog/CustomSettings

Ниже представлен файл settings.yml, который определяет переменные $header_text, $header_text_color и $header_bg:

header_text: 
  type: bool
  default: false
  description:
    en: 'Выберите, чтобы добавить текст в заголовке рядом с логотипом.'
header_text_color: 
  type: string
  default: "$header_primary"
  description:
    en: 'Цвет текста (по умолчанию — "header primary")'
header_bg: 
  type: string
  default: "$header_background"
  description:
    en: 'Цвет текста (по умолчанию — "header background")'

При установке компонента у вас появятся следующие опции настроек:

Это приведёт к следующему CSS:

@if $header_text == "true" {
    .d-header .title::after {
        padding: 0 20px;
        font-size: 1.3em;
        color: $header_text_color;
        background-color:$header_bg;
        content: "Here is some text";
    }
    .archetype-regular #main.no-text .d-header .title::after {
        display:none;
    }
}

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

Вот как создать файл settings.yml. Создайте новый файл:

Введите код (я пишу его в текстовом файле, а затем копирую и вставляю):

Сохраните его, выбрав «Commit new file»:

Затем установите компонент на свой сайт и отредактируйте настройки.