¿Cómo puedo cambiar el fondo de la categoría en la versión móvil?

[Vsekraski (Андрей)]

Hola. No puedo cambiar el fondo de la categoría. ¿Hay alguna forma de hacerlo?

[Lilly (Lillian)]

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:

---

1. encuentro que Horizon es un dolor de cabeza para personalizar ↩︎

[Lilly (Lillian)]

Si deseas usar colores específicos que no estén en la paleta y que cambien con el modo oscuro/claro, puedes utilizar la pestaña de definiciones de color en el mismo componente:

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

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