Como posso alterar o fundo da categoria na versão móvel?

[Vsekraski (Андрей)]

Olá. Não consigo alterar o fundo da categoria. Há alguma forma de fazer isso?

[Lilly (Lillian)]

Acho que isso pode ser complicado de fazer com o Horizon^[1], mas algo assim funcionará em um componente de tema. A cor dependerá da variável que você usar (por exemplo: --tertiary-low das paletas de cores para modo claro/escuro). Você também pode criar suas próprias variáveis e adicionar mais complexidade.

Em um componente de tema com CSS personalizado:

@use "lib/viewport";

//** direcionar o ID da categoria para uma categoria específica **//

.category-box[data-category-id="4"] {

// ** aplicar apenas em dispositivos móveis ** //

  @include viewport.until(md) {
    .category-box-inner {
       background: var(--tertiary-low);
    }
  }
}

Com a paleta de cores que você está usando atualmente no seu site:

modo claro:

modo escuro:

---

1. acho que o Horizon é um incômodo para personalizar ↩︎

[Lilly (Lillian)]

Se você deseja usar cores específicas que não estão na paleta e que mudarão com o modo claro/escuro, pode usar a aba de definições de cores no mesmo componente:

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

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