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

**URL:** <https://meta.discourse.org/t/how-can-i-change-the-category-background-in-the-mobile-version/402473>\
**Category:** Support\
**Tags:** mobile, horizon-theme\
**Created:** [2026年五月8日 11:33 UTC](https://meta.discourse.org/t/how-can-i-change-the-category-background-in-the-mobile-version/402473 "2026-05-08T11:33:19Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)\
**Post date:** [2026年五月8日 14:40 UTC](https://meta.discourse.org/t/how-can-i-change-the-category-background-in-the-mobile-version/402473/2 "2026-05-08T14:40:17Z")

</div>

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

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

```scss
@use "lib/viewport";

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

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

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

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

```

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

浅色模式：

 ![Screenshot 2026-05-08 at 7.34.32 AM](https://global.discourse-cdn.com/meta/original/4X/1/c/a/1ca4903af9fddcf949a2bf2f56a1014220a6e456.png)

深色模式：

 ![Screenshot 2026-05-08 at 7.34.48 AM](https://global.discourse-cdn.com/meta/original/4X/7/1/e/71ea9b50153037ac8560a7e2e804bcf43dbb4327.png)

* * *

1. 我发现 Horizon 很难自定义

---

_[View the full topic](https://meta.discourse.org/t/how-can-i-change-the-category-background-in-the-mobile-version/402473)._