Я думаю, что это может быть сложно реализовать с помощью Horizon[1], но что-то подобное будет работать в компоненте темы. Цвет будет зависеть от используемой вами переменной (например, --tertiary-low из палитр цветов для светлого/темного режима). Вы также можете создать собственные переменные и добавить больше сложности.
В пользовательском CSS компонента темы:
@use "lib/viewport";
//** нацельтесь на идентификатор категории для конкретной категории **//
.category-box[data-category-id="4"] {
// ** применять только к мобильным устройствам ** //
@include viewport.until(md) {
.category-box-inner {
background: var(--tertiary-low);
}
}
}
с палитрой цветов, которую вы сейчас используете на своем сайте:
светлый режим:
темный режим:
я считаю, что Horizon сложно настраивать ↩︎