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

Поддержка
1

Изначально меня устраивала одна светлая и одна тёмная цветовая схема, определённые в рамках моей единой темы. Однако есть CSS-стили, которые я хотел бы изменить конкретно при использовании тёмной цветовой схемы.

Существует ли способ настроить тёмную тему как своего рода дочернюю тему, чтобы она наследовала все стили родительской (светлой) темы, но при этом имела собственную цветовую схему и состояла исключительно из переопределений родительских?

Или что-то подобное?

2

Можете ли вы поделиться, какой именно CSS вы хотели бы изменить только для тёмной цветовой схемы? В теории, если речь идёт только о цветах, это можно сделать с помощью определений цветов. Если же требуется больше, вам понадобятся отдельные темы (и в этом случае вам придётся отказаться от автоматического переключения тёмного режима).

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);
  }
}

Работает!

4

Здесь должно быть common/color_definitions.scss.

А в common.css запасные значения совпадают с начальными, поэтому можно просто использовать:

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

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

Ой, спасибо, я исправил свой пост.

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