모바일 버전에서 카테고리 배경을 어떻게 변경하나요?

[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은 커스터마이징이 꽤 번거롭다는 걸 알아 ↩︎