Элемент CSS на основе выбранной цветовой схемы

Разработка
4

Да, это не сработает таким образом, если можно выбрать тёмную цветовую схему.

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

Создайте компонент темы и добавьте следующее во вкладку Определения цветов

Screenshot 2022-10-18 at 20.56.24
Screenshot 2022-10-18 at 20.56.241089×496 39.2 KB

Установите код цвета secondary-low в $dark-theme-header-icons, а код цвета secondary — в $light-theme-header-icons:

$dark-theme-header-icons: #e9e9e9;
$light-theme-header-icons: #222;

$header-icons: dark-light-choose($light-theme-header-icons, $dark-theme-header-icons);

:root {
  --custom-header-icons: #{$header-icons};
}

После этого вы можете использовать эту цветовую переменную --custom-header-icons для цвета иконок заголовка.

.d-header-icons .d-icon {
  width: 100%;
  line-height: 1.4;
  display: inline-block;
  color: var(--custom-header-icons);
}