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:
acho que o Horizon é um incômodo para personalizar ↩︎