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

제품 지원
1

처음에는 단일 테마 내에서 밝은 테마와 어두운 테마 두 가지 색상 스킴만 정의되어 있어 만족했습니다. 하지만 어두운 색상 스킴이 사용될 때 특정 CSS만 수정하고 싶습니다.

어두운 테마를 일종의 자식 테마로 설정하여 부모(밝은) 테마의 모든 스타일을 상속받되, 자체적인 색상 스킴을 가지며 부모 테마에 대한 오버라이드만으로 구성되도록 할 수 있는 방법이 있을까요?

혹은 이와 유사한 방식이 있을까요?

2

다크 컬러 스킴에서만 특별히 수정하고 싶은 CSS가 무엇인지 공유해 주시겠어요? 이론적으로 색상만 해당된다면 색상 정의를 통해 이 작업을 수행할 수 있습니다. 색상보다 더 많은 부분이 포함된다면 별도의 테마가 필요하며(자동 다크 모드 전환 기능도 포기해야 합니다).

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

정상적으로 작동합니다!

4

common/color_definitions.scss여야 합니다.

그리고 common.css에서 폴백 값이 초기 값과 동일하므로, 다음과 같이 간단하게 사용할 수 있습니다:

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

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

아, 죄송합니다. 그 부분을 수정하여 제 게시글을 편집했습니다.

아, 알겠습니다. 이 게시글을 너무 빠르게 훑어본 나머지, 항상 폴백을 포함하는 것이 모범 사례라고 생각했습니다. 이제 그것이 단순히 하위 호환성을 위한 것임을 깨달았으며, 저는 그 필요성이 없습니다. 그 점을 명확히 해 주셔서 감사합니다. 위의 제 게시글에 있는 코드를 반영하도록 편집했습니다.