Я пытаюсь понять, как установить цвет элемента в зависимости от выбранной цветовой схемы. Приведенный код хорошо работает для светлой темы, но не совсем подходит для темной.
.d-header-icons .d-icon {
width: 100%;
line-height: 1.4;
display: inline-block;
color: var(--secondary);
}
Я бы предпочел использовать следующее только для темной темы:
color: var(--secondary-low)
Это хорошо работает в темной теме, но не в светлой. Есть ли способ изменить значение color: в зависимости от выбранной цветовой схемы?
Don
18.Октябрь.2022 17:01:04
2
Здравствуйте,
Есть несколько способов сделать это.
Например:
Вы можете изменить цвета цветовой схемы на admin/customize/colors/. Просто выберите вашу цветовую схему тёмного режима и измените код цвета secondary.
Примечание: Это изменит вторичный цвет везде, а не только на иконках в заголовке.
Или вы можете использовать медиа-запрос prefers-color-scheme, чтобы изменить secondary на secondary-low в тёмном режиме.
Что-то вроде этого:
.d-header-icons .d-icon {
width: 100%;
line-height: 1.4;
display: inline-block;
color: var(--secondary);
@media (prefers-color-scheme: dark) {
color: var(--secondary-low);
}
}
Или вы можете создать собственные определения цветов: Why might dark-light-choose() not work? - #2 by awesomerobot
Надеюсь, это поможет
Спасибо за подсказку.
Кажется, это именно то, что я хочу сделать (изменить только иконки в заголовке, а не все элементы с цветом --secondary). Один последний вопрос: это работает, если тема установлена как тема тёмного режима и тёмный режим активирован операционной системой, но не работает, если тема тёмного режима выбрана как «Обычная» тема. Есть какие-нибудь предложения по этому поводу?
Don
18.Октябрь.2022 19:02:54
4
Да, это не сработает таким образом, если можно выбрать тёмную цветовую схему.
Я думаю, что лучший вариант — создать собственное определение цвета для этого и использовать эту цветовую переменную для иконок заголовка.
Создайте компонент темы и добавьте следующее во вкладку Определения цветов
Установите код цвета 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);
}
Это сработало как по волшебству! Спасибо!
Ещё один момент… будет ли это работать, если я включу color_definitions.scss в свою тему вместо использования компонента темы?
Don
18.Октябрь.2022 20:10:02
7
Конечно, это тоже сработает.
