Как изменить элемент CSS в зависимости от тёмного или светлого режима?

Кажется, я не нашёл однозначного ответа при поиске, но хочу изменить один элемент CSS по-разному для тёмной и светлой тем.

Какой лучший способ сделать это в Discourse?

Я подозреваю, что эта тема может вам помочь.

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

Спасибо, Лилли!

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

Какой элемент CSS вы хотите изменить в зависимости от тёмного/светлого режима?

Вы можете добавить определения цветов на вкладку «Определения цветов» в редакторе CSS/HTML темы (стили color_definitions).

Извините за поздний ответ! Я хотел изменить цвет выделенной* полосы в верхней части поста экспертного ответа в теме, но при этом хотел использовать разные цвета для светлой и тёмной тем.

Не совсем понял, что вы имеете в виду? Можете предоставить скриншот?

Выделено извините, опечатка с мобильного!

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

@sp-jordan-violet обычно рекомендуется использовать переменные цветов из ваших тёмной и светлой цветовых схем. Вы можете проверить текущие значения с помощью инспектора браузера. Насколько я знаю, вы не можете добавлять новые переменные, которые будут автоматически переключаться в зависимости от цветовой схемы. Однако существует множество переменных на выбор, и вы можете использовать их в любых пользовательских объявлениях. Например:

.topic-avatar {
  height: unset;
  align-self: stretch;
  background-image: linear-gradient(
      to right,
      transparent -40%,
      var(--secondary) 80%
    ),
    linear-gradient(
      to bottom,
      var(--tertiary-300) 0%,
      var(--highlight) 50%,
      var(--quaternary-low) 100%
    );
}

это может создать подсветку поста, как на этой :rainbow: :slight_smile:

Да, я склонен согласиться. Я тоже экспериментировал с решением на JavaScript и CSS, но пока ничего не работает.

Вау, мне очень нравится эта идея!!

Это выглядит действительно круто. Молодец :slight_smile: