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

**URL:** https://meta.discourse.org/t/dark-theme-version-that-inherits-light-theme-overrides-portions/164399
**Category:** Support
**Created:** [9월 17, 2020, 11:31오후 UTC](https://meta.discourse.org/t/dark-theme-version-that-inherits-light-theme-overrides-portions/164399 "2020-09-17T23:31:58Z")
**Posts on this page:** 1
**Showing post:** 3

<div class="post-metadata">

### Author: ![paulrudy](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/paulrudy/32/259901_2.png) [@paulrudy](https://meta.discourse.org/u/paulrudy)
#### Post date: [9월 19, 2020, 9:40오후 UTC](https://meta.discourse.org/t/dark-theme-version-that-inherits-light-theme-overrides-portions/164399/3 "2020-09-19T21:40:41Z")

</div>

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

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

라이트 모드:

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

```

다크 모드:

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

```

@pmusaraj 님의 [이 게시물](https://meta.discourse.org/t/updating-themes-and-plugins-to-support-automatic-dark-mode/161595/5)을 참고하고, 몇 가지 실험을 거쳐 다음과 같이 처리했습니다:

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

```scss
$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

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

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

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

```

정상적으로 작동합니다!

---

_[View the full topic](https://meta.discourse.org/t/dark-theme-version-that-inherits-light-theme-overrides-portions/164399)._