如何在移动版中更改分类背景？

[Vsekraski (Андрей)]

您好。我无法更改分类的背景。请问有什么方法可以实现吗？

[Lilly (Lillian)]

我觉得用 Horizon 实现这一点可能会有点棘手^[1]，但在主题组件中，类似这样的方案是可行的。颜色将取决于你使用的变量（例如，来自深色/浅色模式颜色调色板的 --tertiary-low）。你也可以自定义变量并增加更多复杂度。

在主题组件的自定义 CSS 中：

@use "lib/viewport";

//** 针对特定类别的类别 ID **//

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

// ** 仅应用于移动设备 ** //

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

使用你网站上当前采用的颜色调色板：

浅色模式：

深色模式：

---

1. 我发现 Horizon 很难自定义 ↩︎

[Lilly (Lillian)]

如果您想使用调色板中不包含的特定颜色，且这些颜色会随深色/浅色模式切换而变化，您可以在同一组件的“颜色定义”选项卡中进行设置：

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

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