라이트 테마를 상속하고 일부만 오버라이드하는 다크 테마 버전?

제품 지원
3

독자분들에게 과정을 길게 설명하기보다는, 한 번에 배운 내용을 반영하도록 이 게시글을 수정합니다:

라이트 모드와 다크 모드 간에 다르게 적용하고 싶은 CSS 예시:

라이트 모드:

.nav-pills>li>a:hover {
  &:not(.active) {
    color: var(--primary-high, $primary-high);
  }
}

다크 모드:

.nav-pills>li>a:hover {
  background-color: $quaternary-low-dmode;
}

@pmusaraj 님의 이 게시물을 참고하고, 몇 가지 실험을 거쳐 다음과 같이 처리했습니다:

common/color_definitions.scss에서 .nav-pills의 배경색과 글자색을 나타내는 변수를 정의했습니다. 제 다크 모드에서는 글자색을 지정하지 않았고, 라이트 모드에서는 배경색을 지정하지 않았지만, dark-light-choose()가 작동하려면 무언가를 지정해야 하므로 Discourse 코어 변수($primary와 $quaternary-low)를 각각 사용했습니다:

$quaternary-low-dmode: #405E68;

$nav-pills: dark-light-choose($quaternary, $primary);
$nav-pills-bg: dark-light-choose($quaternary-low, $quaternary-low-dmode);

:root {
  --custom-nav-pills: #{$nav-pills};
  --custom-nav-pills-bg: #{$nav-pills-bg};
}

그리고 common.scss의 관련 코드:


// 다크 모드와 라이트 모드 모두에 적용되는 범용 scss:

.nav-pills>li>a:hover {
  background-color: var(--custom-nav-pills-bg);

  &:not(.active) {
    color: var(--custom-nav-pills);
  }
}

정상적으로 작동합니다!