Wie kann ich den Kategorienhintergrund in der mobilen Version ändern?

[Vsekraski (Андрей)]

Hallo. Ich kann den Hintergrund der Kategorie nicht ändern. Gibt es eine Möglichkeit, dies zu tun?

[Lilly (Lillian)]

Ich denke, das könnte mit Horizon schwierig sein^[1], aber so etwas funktioniert in einer Theme-Komponente. Die Farbe hängt davon ab, welche Variable Sie verwenden (z. B. --tertiary-low aus den Farbpaletten für den Dunkel-/Hellmodus). Sie können auch eigene Variablen erstellen und die Komplexität erhöhen.

In einer Theme-Komponente für benutzerdefiniertes CSS:

@use "lib/viewport";

//** Ziel die Kategorie-ID für eine bestimmte Kategorie **//

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

// ** Nur auf Mobilgeräte anwenden ** //

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

mit der Farbpalette, die Sie derzeit auf Ihrer Website verwenden:

Hellmodus:

Dunkelmodus:

---

1. ich finde, Horizon ist eine Qual zu personalisieren ↩︎

[Lilly (Lillian)]

Wenn Sie bestimmte Farben verwenden möchten, die nicht in der Palette enthalten sind und sich bei Dunkel- und Hellmodus ändern, können Sie im selben Baustein den Reiter für Farbd Definitionen verwenden:

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

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