Правильный способ редактирования CSS для светлой и темной тем

Поддержка
1

Мне нужно отредактировать много CSS-стилей для светлой и темной тем. Я прочитал несколько постов на форуме, где говорится, что надежного способа сделать это не существует, включая

Однако многие из этих постов уже устарели. Есть ли простой способ в 2026 году? Я протестировал использование следующего кода:

@container style(--scheme-type: light) {
  body {
    background: #ffffff !important;
  }
}
@container style(--scheme-type: dark) {
.sidebar-wrapper {
   background: #000000 !important;
}
}

Не уверен, что это правильно, но это работает.

2

Запрос контейнера будет работать, но для упрощения вы также можете использовать встроенную функцию light-dark() в CSS:

.my-thing {
  background: light-dark(#fff, #000);
  color: light-dark(#222, #eee);
}

Как правило, в Discourse мы полагаемся на цветовые переменные, которые автоматически меняются, чтобы избежать установки конкретных цветов таким образом (--primary, --secondary и т. д.)… это позволяет цветам работать независимо от цветовой схемы.

Примеры можно посмотреть здесь: https://meta.discourse.org/styleguide/atoms/colors, а также как они меняются при переключении между темным и светлым режимами. Эти переменные настраиваются через цветовые палитры в /admin/config/colors

3

Отлично, большое спасибо, Крис. Кстати, эта ссылка не работает.