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 :
je trouve qu’Horizon est pénible à personnaliser ↩︎