Comment modifier l'arrière-plan de la catégorie dans la version mobile ?

[Vsekraski (Андрей)]

Bonjour. Je ne parviens pas à modifier l’arrière-plan de la catégorie. Existe-t-il une méthode pour le faire ?

[Lilly (Lillian)]

Je pense que cela pourrait être délicat à réaliser avec Horizon^[1], mais quelque chose comme cela fonctionnera dans un composant de thème. La couleur dépendra de la variable que vous utilisez (par exemple : --tertiary-low provenant des palettes de couleurs pour le mode clair/sombre). Vous pouvez également créer vos propres variables et ajouter plus de complexité.

Dans un composant de thème, en CSS personnalisé :

@use "lib/viewport";

//** cibler l'ID de catégorie pour une catégorie spécifique **//

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

// ** s'applique uniquement sur mobile ** //

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

Avec la palette de couleurs actuellement utilisée sur votre site :

mode clair :

mode sombre :

---

1. je trouve qu’Horizon est pénible à personnaliser ↩︎

[Lilly (Lillian)]

Si vous souhaitez utiliser des couleurs spécifiques qui ne figurent pas dans la palette et qui changeront avec le mode sombre/clair, vous pouvez utiliser l’onglet des définitions de couleurs dans le même composant :

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

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