# Версия тёмной темы, наследующая светлую с частичным переопределением?
**URL:** https://meta.discourse.org/t/dark-theme-version-that-inherits-light-theme-overrides-portions/164399
**Category:** Support
**Created:** [17.Сентябрь.2020 23:31:58 UTC](https://meta.discourse.org/t/dark-theme-version-that-inherits-light-theme-overrides-portions/164399 "2020-09-17T23:31:58Z")
**Posts on this page:** 6
**Page:** 1
### Author:  [@paulrudy](https://meta.discourse.org/u/paulrudy)
#### Post date: [17.Сентябрь.2020 23:31:58 UTC](https://meta.discourse.org/t/dark-theme-version-that-inherits-light-theme-overrides-portions/164399/1 "2020-09-17T23:31:58Z")
Изначально меня устраивала одна светлая и одна тёмная цветовая схема, определённые в рамках моей единой темы. Однако есть CSS-стили, которые я хотел бы изменить конкретно при использовании тёмной цветовой схемы.
Существует ли способ настроить тёмную тему как своего рода дочернюю тему, чтобы она наследовала все стили родительской (светлой) темы, но при этом имела собственную цветовую схему и состояла исключительно из переопределений родительских?
Или что-то подобное?
---
### Author:  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [19.Сентябрь.2020 19:04:59 UTC](https://meta.discourse.org/t/dark-theme-version-that-inherits-light-theme-overrides-portions/164399/2 "2020-09-19T19:04:59Z")
> [@paulrudy](#):
>
> Но есть CSS, который я хотел бы изменить конкретно при использовании тёмной цветовой схемы.
Можете ли вы поделиться, какой именно CSS вы хотели бы изменить только для тёмной цветовой схемы? В теории, если речь идёт только о цветах, это можно сделать с помощью определений цветов. Если же требуется больше, вам понадобятся отдельные темы (и в этом случае вам придётся отказаться от автоматического переключения тёмного режима).
---
### Author:  [@paulrudy](https://meta.discourse.org/u/paulrudy)
#### Post date: [19.Сентябрь.2020 21:40:41 UTC](https://meta.discourse.org/t/dark-theme-version-that-inherits-light-theme-overrides-portions/164399/3 "2020-09-19T21:40:41Z")
Редактирую этот пост, чтобы сразу изложить то, что узнал, вместо того чтобы утомлять читателей описанием процесса:
Пример CSS, который я хочу варьировать между светлой и тёмной темой:
Светлая тема:
```scss
.nav-pills>li>a:hover {
&:not(.active) {
color: var(--primary-high, $primary-high);
}
}
```
Тёмная тема:
```scss
.nav-pills>li>a:hover {
background-color: $quaternary-low-dmode;
}
```
Я обратился к посту @pmusaraj [здесь](https://meta.discourse.org/t/updating-themes-and-plugins-to-support-automatic-dark-mode/161595/5) и после некоторых экспериментов сделал следующее:
В файле `common/color_definitions.scss` определил переменные для представления `background-color` и цвета шрифта для `.nav-pills`. В моей тёмной теме не указан цвет шрифта, а в светлой — цвет фона, но для работы функции `dark-light-choose()` нужно указать _что-то_, поэтому я использовал базовые переменные Discourse (`$primary` и `$quaternary-low` соответственно):
```scss
$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
// Универсальный SCSS для обеих тем: светлой и тёмной:
.nav-pills>li>a:hover {
background-color: var(--custom-nav-pills-bg);
&:not(.active) {
color: var(--custom-nav-pills);
}
}
```
Работает!
---
### Author:  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [21.Сентябрь.2020 13:11:01 UTC](https://meta.discourse.org/t/dark-theme-version-that-inherits-light-theme-overrides-portions/164399/4 "2020-09-21T13:11:01Z")
> [@paulrudy](#):
>
> В common/custom\_variables.scss
Здесь должно быть `common/color_definitions.scss`.
А в common.css запасные значения совпадают с начальными, поэтому можно просто использовать:
```scss
.nav-pills>li>a:hover {
background-color: var(--custom-nav-pills-bg);
&:not(.active) {
color: var(--custom-nav-pills);
}
}
```
---
### Author:  [@paulrudy](https://meta.discourse.org/u/paulrudy)
#### Post date: [21.Сентябрь.2020 20:52:58 UTC](https://meta.discourse.org/t/dark-theme-version-that-inherits-light-theme-overrides-portions/164399/5 "2020-09-21T20:52:58Z")
> [@pmusaraj](#):
>
> Это должно быть `common/color_definitions.scss`.
Ой, спасибо, я исправил свой пост.
> [@pmusaraj](#):
>
> А в common.css значения по умолчанию такие же, как и начальные.
А, понял. Я слишком быстро просмотрел [этот пост](https://meta.discourse.org/t/updating-themes-and-plugins-to-support-automatic-dark-mode/161595) и предположил, что всегда включать значение по умолчанию — это лучшая практика. Я осознал, что это нужно только для обратной совместимости, которая мне не требуется. Спасибо за уточнение. Я обновил код в своём посте выше, чтобы это отразить.
---
### Author:  [@system](https://meta.discourse.org/u/system)
#### Post date: [21.Октябрь.2020 20:54:52 UTC](https://meta.discourse.org/t/dark-theme-version-that-inherits-light-theme-overrides-portions/164399/6 "2020-10-21T20:54:52Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.