Penso che possa essere complicato farlo con Horizon[1], ma qualcosa di simile funzionerà in un componente del tema. Il colore dipenderà dalla variabile che utilizzi (ad esempio: --tertiary-low dalle palette colori per la modalità chiara/scura). Puoi creare anche le tue variabili e aggiungere maggiore complessità.
In un componente del tema con CSS personalizzato:
@use "lib/viewport";
//** seleziona l'ID della categoria per una categoria specifica **//
.category-box[data-category-id="4"] {
// ** applica solo su dispositivi mobili ** //
@include viewport.until(md) {
.category-box-inner {
background: var(--tertiary-low);
}
}
}
con la palette colori attualmente utilizzata sul tuo sito:
modalità chiara:
modalità scura:
trovo che Horizon sia un incubo da personalizzare ↩︎