How can I change the category background in the mobile version?

[Vsekraski (Андрей)]

Hello. I can’t change the background of the category. Is there a way to do this?

[Lilly (Lillian)]

i think this may be tricky to do with horizon^[1] but something like this will work in a theme component. the color will depend on what variable you use, (eg: --tertiary-low from the color palettes for dark/light mode). you can make your own variables too and add more complexity.

in a theme component custom CSS:

@use "lib/viewport";

//** target the category id for specific category **//

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

// ** only apply to mobile ** //

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

with the color palette you are currently using on your site:

light mode:

dark mode:

---

1. i find that horizon is a pain to customize ↩︎