Привет!
Насколько я понял, любые изменения в CSS применяются сразу к обоим режимам — светлому и тёмному, что не совсем логично.
Недавно я столкнулся с такой проблемой: в тёмном режиме текст внутри обёртки имеет тот же цвет, что и сама обёртка. Если я меняю это через CSS, то текст в светлой теме тоже меняется, а мне это не нужно.
Как можно изменить CSS только для одной цветовой схемы?
Если вы используете переменные цветов (например, var(--primary-very-low), var(--secondary-low)), доступные в гайде по стилям вашего форума по адресу /styleguide/atoms/colors, то темный и светлый режимы должны корректно отображать соответствующие переменные (вы также можете увидеть их в двух цветовых палитрах, которые используются для переключения между темной и светлой темой). Вам необходимо включить настройку styleguide enabled в административных настройках, а также доступна настройка styleguide admin only, которая ограничивает доступ к гайду только администраторам.
Проблема в том, что я уже внес изменения, не учитывающие переменную цвета, заданную в гайде по стилям (хотя я не мог получить к ней доступ через /styleguide/atoms/colors). Есть ли способ сделать это, не следуя переменным?
Если я правильно понимаю проблему, для этого есть конкретное решение.
Я работаю над руководством по этой теме, но мне немного трудно объединить информацию так, чтобы её можно было напрямую использовать в теме, при этом сохранив объяснение технических деталей.
Чтобы максимально ясно объяснить, как это сделать…
Я предлагаю вам создать тему локально (это поможет Install the Discourse Theme CLI console app to help you build themes).
Затем создайте файл common/color_definitions.scss в вашей теме и напишите в нём:
$my-color: dark-light-choose(#FC3468, #FF93AC);
:root {
--my-color: #{$my-color};
}
Затем в файле common/common.scss вы можете использовать переменную следующим образом:
h1 {
color: var(--my-color);
}
Это автоматически выберет правильный цвет в тёмном или светлом режиме.