Версия тёмной темы, наследующая светлую с частичным переопределением?

Поддержка
3

Редактирую этот пост, чтобы сразу изложить то, что узнал, вместо того чтобы утомлять читателей описанием процесса:

Пример CSS, который я хочу варьировать между светлой и тёмной темой:

Светлая тема:

.nav-pills>li>a:hover {
  &:not(.active) {
    color: var(--primary-high, $primary-high);
  }
}

Тёмная тема:

.nav-pills>li>a:hover {
  background-color: $quaternary-low-dmode;
}

Я обратился к посту @pmusaraj здесь и после некоторых экспериментов сделал следующее:

В файле common/color_definitions.scss определил переменные для представления background-color и цвета шрифта для .nav-pills. В моей тёмной теме не указан цвет шрифта, а в светлой — цвет фона, но для работы функции dark-light-choose() нужно указать что-то, поэтому я использовал базовые переменные Discourse ($primary и $quaternary-low соответственно):

$quaternary-low-dmode: #405E68;

$nav-pills: dark-light-choose($quaternary, $primary);
$nav-pills-bg: dark-light-choose($quaternary-low, $quaternary-low-dmode);

:root {
  --custom-nav-pills: #{$nav-pills};
  --custom-nav-pills-bg: #{$nav-pills-bg};
}

Затем соответствующий код в файле common.scss:


// Универсальный SCSS для обеих тем: светлой и тёмной:

.nav-pills>li>a:hover {
  background-color: var(--custom-nav-pills-bg);

  &:not(.active) {
    color: var(--custom-nav-pills);
  }
}

Работает!