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

Здравствуйте,

Есть несколько способов сделать это.

Например:

Вы можете изменить цвета цветовой схемы на 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


Надеюсь, это поможет :slightly_smiling_face: