Creo que esto puede ser complicado de hacer con Horizon[1], pero algo así funcionará en un componente de tema. El color dependerá de la variable que utilices (por ejemplo, --tertiary-low de las paletas de colores para modo claro/oscuro). También puedes crear tus propias variables y añadir más complejidad.
En un componente de tema con CSS personalizado:
@use "lib/viewport";
//** apunta al ID de la categoría para una categoría específica **//
.category-box[data-category-id="4"] {
// ** aplica solo a móviles ** //
@include viewport.until(md) {
.category-box-inner {
background: var(--tertiary-low);
}
}
}
Con la paleta de colores que estás usando actualmente en tu sitio:
modo claro:
modo oscuro:
encuentro que Horizon es un dolor de cabeza para personalizar ↩︎