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 ↩︎

[Lilly (Lillian)]

if you want to use specific colors not in the palette that will change with dark light, you can use the color definitions tab in the same component:

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

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