モバイル版のカテゴリ背景を変更するには？

[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)]

ダークモードとライトモードで切り替わるパレットに含まれていない特定の色を使用したい場合は、同じコンポーネント内の「Color Definitions」タブをご利用ください。

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

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