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

[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)};
}

[chapoi]

顺便提一下：

Horizon 主题并非设计用于自定义。

如果您希望进行任何自定义，官方建议从 Foundation 主题开始，并将其作为基础。

详见 此处

@Discourse

我们建议希望进行自定义的网站使用 Foundation 主题。

[Lilly (Lillian)]

这很令人遗憾，因为管理员希望自定义他们的站点。这正是人们喜欢 Discourse 的原因之一。

[chapoi]

是的，如果你能调整一下，当然可以。说“不”意味着你不能。

但它并非为此设计，因此我们并未将其构建为易于自定义的形式。它的定位是面向技术背景较弱的用户，开箱即用的主题。