Как изменить фон категории в мобильной версии?

[Vsekraski (Андрей)]

Здравствуйте. Я не могу изменить фон категории. Есть способ это сделать?

[Lilly (Lillian)]

Я думаю, что это может быть сложно реализовать с помощью 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);
    }
  }
}

с палитрой цветов, которую вы сейчас используете на своем сайте:

светлый режим:

темный режим:

---

1. я считаю, что Horizon сложно настраивать ↩︎

[Lilly (Lillian)]

Если вы хотите использовать конкретные цвета, которых нет в палитре и которые должны меняться в зависимости от светлой или тёмной темы, вы можете использовать вкладку определений цветов в том же компоненте:

$bg-light: aqua;
$bg-dark: blueviolet;

:root {
  --category-id-4-background: #{dark-light-choose($bg-light, $bg-dark)};
}