Палитры цветов загружаются некорректно в 2.7.0.beta5

Сегодня утром обновился до версии 2.7.0.beta5, и многие цвета изменились. Похоже, что палитра цветов считывается неправильно, и вместо неё используется палитра по умолчанию, которая появляется при нажатии на «Новая палитра». Две темы ниже используют разные палитры цветов, но обе в итоге получают палитру «Новая палитра цветов Discourse» → «Базовая палитра: Светлая», определённую в первой строке CSS.

Пример 1:
Вот палитра цветов темы:

Вот первая строка CSS:

$primary: #222222 !default; $secondary: #ffffff !default; $tertiary: #0088cc !default; $quaternary: #e45735 !default; $header_background: #ffffff !default; $header_primary: #333333 !default; $highlight: #ffff4d !default; $danger: #e45735 !default; $success: #009900 !default; $love: #fa6c8d !default;

Пример 2:
Вот палитра цветов темы:

Вот первая строка CSS:

$primary: #222222 !default; $secondary: #ffffff !default; $tertiary: #0088cc !default; $quaternary: #e45735 !default; $header_background: #ffffff !default; $header_primary: #333333 !default; $highlight: #ffff4d !default; $danger: #e45735 !default; $success: #009900 !default; $love: #fa6c8d !default;

Если я начинаю с пустой новой темы и добавляю палитру, всё работает как ожидается, но для моих существующих тем загружается палитра «Светлая» по умолчанию вместо назначенной палитры.

1 лайк

На данный момент единственный способ обойти это — вручную добавлять нужные переменные цвета Sass для каждой темы и компонента.

1 лайк

Мне не удалось воспроизвести эту проблему… Если вы измените цветовую палитру в существующей теме, останется ли она некорректной?

3 лайка

Похоже, у нас возникла та же проблема. После обновления до версии 2.7.0.beta5 (6c57f6f49d) цветовая схема перестала применяться в нашем компоненте темы.

Мы используем:

#meta-links {
    background-color: $header_background;
}

но фоновый цвет оказался #fff вместо цвета, определённого в цветовой схеме.

Я попробовал:

  • переназначить цветовую схему для темы
  • скопировать цветовую схему и назначить копию теме
  • переназначить компонент темы для темы

но это, похоже, не помогло. Временное решение — вручную задать цвет в CSS.

2 лайка

Похоже, что происходит следующее: загружается правильная палитра для базовой темы, но не для каких-либо компонентов. Поэтому части страницы, которые не используют компоненты, имеют правильные цвета, а части, которые полагаются на компонент, загружают палитру «Светлая» по умолчанию Discourse вместо использования палитры, назначенной теме.

Из инструментов разработчика:
В файле color_definitions.scss указана правильная палитра

В файле desktop.scss указана правильная палитра
image

theme_174.scss, который является компонентом, использует палитру Light по умолчанию
image

theme_171 — это компонент, который в common.css содержит только следующие строки CSS и ничего больше:

#banner {
    margin: auto 20px;
    background-color: $primary-low;
    max-width: 880px;
    border: 1px solid #999 ;
}
2 лайка

Спасибо @gkln и @smrtey за дополнительные детали… Попробуйте отключать компоненты по одному, чтобы посмотреть, изменится ли что-то… Возможно, где-то есть скрытая ошибка, которая не отображается, и это может нарушать CSS для компонентов.

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

$primary: #22262a !important; $secondary: #fefefe !important; $tertiary: #2572e4 !important; $quaternary: #518ee9 !important; $header_background: #1550a7 !important; $header_primary: #fcfcfc !important; $highlight: #9edaf5 !important; $danger: #ff7114 !important; $success: #85cc54 !important; $love: #de0100 !important; 

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

1 лайк

ok, @pmusaraj внимательно посмотрел и нашел ошибку… она исправлена здесь:

…поэтому повторное обновление ваших сайтов должно решить проблему.

Если это компоненты тем, которые вы создали, мы рекомендуем обновить их, чтобы использовать пользовательские свойства CSS вместо наших переменных SCSS. Этот переход позволит вам использовать автоматический темный режим и упростит переопределение цветов. Подробнее здесь:

6 лайков