# 다크/라이트 모드 전환 기능이 이제 코어에서 사용 가능

**URL:** https://meta.discourse.org/t/dark-light-mode-toggle-now-available-in-core/350991
**Category:** Announcements
**Created:** [2월 7, 2025, 2:30오전 UTC](https://meta.discourse.org/t/dark-light-mode-toggle-now-available-in-core/350991 "2025-02-07T02:30:43Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![Osama](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/osama/32/98013_2.png) [@Osama](https://meta.discourse.org/u/Osama)
#### Post date: [2월 7, 2025, 2:30오전 UTC](https://meta.discourse.org/t/dark-light-mode-toggle-now-available-in-core/350991/1 "2025-02-07T02:30:43Z")

</div>

다크/라이트 모드 전환(Dark/Light Mode Toggle) 테마 컴포넌트는 사용자가 라이트 모드와 다크 모드를 쉽게 전환할 수 있도록 토글을 추가하는 기능으로, 이제 Discourse 코어에 통합되었으며 `interface color selector` 사이트 설정을 통해 활성화할 수 있습니다.

다양한 버그 수정 및 개선 사항 외에도, 코어 버전은 원래의 테마 컴포넌트와 약간 다른 점이 있습니다. 코어 버전에는 사용자가 기기의 시스템 설정에 맞춰 사이트의 색상 모드를 자동으로 조정하는 세 번째 옵션인 "자동(Auto)"이 포함되어 있습니다.

색상 선택기는 `interface color selector` 사이트 설정을 통해 구성할 수 있으며, 검색 아이콘 옆의 사이트 헤더에 표시하거나 사이드바 푸터에 표시하도록 설정할 수 있습니다.

사이드바 푸터에 표시된 경우의 스크린샷은 다음과 같습니다:

 ![](https://global.discourse-cdn.com/meta/original/4X/2/1/f/21fb7ebed969a83c38a2e3d72c3264574e4205e2.png)

헤더에 표시된 경우의 스크린샷은 다음과 같습니다:

 ![](https://global.discourse-cdn.com/meta/original/4X/1/d/3/1d34cb8e34877f80c73ea69e3e340465980412b9.png)

## 기존 테마 컴포넌트 사용자

테마 컴포넌트는 비활성화(deprecated)되었으며, 코어 버전이 사용 가능한지 감지하고 관리자에게 이를 삭제하고 코어 버전을 활성화하도록 알리는 최종 업데이트가 배포되었습니다. 관리자 알림의 스크린샷은 다음과 같습니다:

 ![](https://global.discourse-cdn.com/meta/original/4X/d/d/e/ddeac1a11253d12193a94476fc55093097c5b320.png)

코어 버전이 활성화되면 테마 컴포넌트는 더 이상 사이트에 영향을 주지 않습니다. 그러나 테마 컴포넌트에 대한 유지보수를 더 이상 수행하지 않으므로, 미래의 잠재적인 문제를 방지하기 위해 이를 완전히 삭제해야 합니다.

---

<div class="post-metadata">

### Author: ![Kevin7](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kevin7/32/110326_2.png) [@Kevin7](https://meta.discourse.org/u/Kevin7)
#### Post date: [2월 7, 2025, 11:17오전 UTC](https://meta.discourse.org/t/dark-light-mode-toggle-now-available-in-core/350991/2 "2025-02-07T11:17:20Z")

</div>

안녕하세요, 이 새로운 기능을 제공해 주셔서 감사합니다. 그런데 다크 모드로 전환해도 버튼의 텍스트와 아이콘이 흰색으로 바뀌지 않고 여전히 검은색으로 남아 있는 이유가 궁금합니다. 다크 모드가 활성화된 상태에서 버튼의 텍스트와 아이콘을 흰색으로 변경하는 방법은 무엇인가요? 감사합니다.

---

<div class="post-metadata">

### Author: ![Osama](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/osama/32/98013_2.png) [@Osama](https://meta.discourse.org/u/Osama)
#### Post date: [2월 7, 2025, 12:47오후 UTC](https://meta.discourse.org/t/dark-light-mode-toggle-now-available-in-core/350991/3 "2025-02-07T12:47:58Z")

</div>

> [@Kevin7](#):
>
> 어두운 모드로 전환할 때 버튼의 텍스트와 아이콘이 단순히 흰색으로 바뀌지 않고 여전히 검은색인 이유가 궁금합니다. 어두운 모드가 활성화되었을 때 버튼의 텍스트와 아이콘을 흰색으로 변경하는 방법이 있을까요?

확인 중인 문제의 스크린샷을 공유해 주시겠습니까?

---

<div class="post-metadata">

### Author: ![Kevin7](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kevin7/32/110326_2.png) [@Kevin7](https://meta.discourse.org/u/Kevin7)
#### Post date: [2월 7, 2025, 2:04오후 UTC](https://meta.discourse.org/t/dark-light-mode-toggle-now-available-in-core/350991/4 "2025-02-07T14:04:28Z")

</div>

예를 들어, Discourse를 다크 모드로 전환하면 일부 버튼 텍스트가 여전히 검은색으로 남아 있습니다. 텍스트가 흰색으로 표시되는 것이 더 합리적이라고 생각합니다. 하지만 이 문제를 해결하기 위해 CSS를 활용한 해결책을 찾았고, 잘 작동하는 것 같습니다.

 ![Brave Browser 2025-02-07 14.59.24](https://global.discourse-cdn.com/meta/original/4X/8/a/1/8a1816b52a9bb873dc874bf605cfa12b399ac6b1.png)

```plaintext
$button-text-color: dark-light-choose(#ffffff, $primary);

:root {
  --button-text-color: #{$button-text-color};
}

.btn-primary {
  color: var(--button-text-color) !important;
  
  .d-icon {
    color: var(--button-text-color) !important;
  }
}

```

---

<div class="post-metadata">

### Author: ![Osama](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/osama/32/98013_2.png) [@Osama](https://meta.discourse.org/u/Osama)
#### Post date: [2월 7, 2025, 4:39오후 UTC](https://meta.discourse.org/t/dark-light-mode-toggle-now-available-in-core/350991/5 "2025-02-07T16:39:49Z")

</div>

> [@Kevin7](#):
>
> 일부 버튼 텍스트가 여전히 검정색으로 표시됩니다.

기본 색상 팔레트에서 파란색 배경을 가지는 기본 버튼의 경우, 이는 저희의 의도적인 디자인 결정입니다. 따라서 모든 사용자를 위해 변경하지 않을 예정입니다. 다만, Discourse는 매우 유연하며 코어 CSS를 오버라이드할 수 있는 테마 시스템이 있습니다.

---

<div class="post-metadata">

### Author: ![joo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/joo/32/334852_2.png) [@joo](https://meta.discourse.org/u/joo)
#### Post date: [2월 7, 2025, 4:46오후 UTC](https://meta.discourse.org/t/dark-light-mode-toggle-now-available-in-core/350991/6 "2025-02-07T16:46:43Z")

</div>

이미 설정을 완료했지만 해당 옵션을 볼 수 없습니다. 그 이유를 설명해 주시겠습니까?

 ![이미지는 "인터페이스 색상 선택기" 옵션 아래에 "사이드바 푸터에 표시"라고 표시된 드롭다운 메뉴를 보여줍니다. 이는 인터페이스 색상의 라이트/다크 모드 선택기가 사용 가능한 위치를 나타내며, 흰색 텍스트로 상세히 설명되어 있고 회색 화살표가 드롭다운 표시기를 가리키고 있습니다. (AI 생성 제목)](https://global.discourse-cdn.com/meta/original/4X/e/a/7/ea7ab708c24b7237e3795424128b59f7038459b9.png)

---

<div class="post-metadata">

### Author: ![Osama](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/osama/32/98013_2.png) [@Osama](https://meta.discourse.org/u/Osama)
#### Post date: [2월 7, 2025, 4:56오후 UTC](https://meta.discourse.org/t/dark-light-mode-toggle-now-available-in-core/350991/7 "2025-02-07T16:56:15Z")

</div>

설정(`/my/preferences/interface`)에서 밝은 테마와 어두운 테마 팔레트를 모두 선택하셨나요? 밝은 테마와 어두운 테마 팔레트가 모두 선택된 경우에만 토글이 표시됩니다:

 ![](https://global.discourse-cdn.com/meta/original/4X/8/8/2/88262f97a227716ad7d3f5db46a6427eb84fddd9.png)

---

<div class="post-metadata">

### Author: ![patrickemin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/patrickemin/32/520162_2.png) [@patrickemin](https://meta.discourse.org/u/patrickemin)
#### Post date: [2월 7, 2025, 11:11오후 UTC](https://meta.discourse.org/t/dark-light-mode-toggle-now-available-in-core/350991/8 "2025-02-07T23:11:22Z")

</div>

안녕하세요, 제 설정에서 색상 팔레트 옵션을 찾을 수 없습니다. "테마"와 "다크 모드"만 보이거든요:

 ![The image shows a user interface menu in a French application, with options such as Profile, Emails, Notifications, and Interface highlighted, and a red graph indicating theme rotation feature. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/7/f/6/7f6ad14283adcaba2c0f7efee23b37bd161d0961.png)

---

<div class="post-metadata">

### Author: ![Osama](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/osama/32/98013_2.png) [@Osama](https://meta.discourse.org/u/Osama)
#### Post date: [2월 7, 2025, 11:45오후 UTC](https://meta.discourse.org/t/dark-light-mode-toggle-now-available-in-core/350991/9 "2025-02-07T23:45:27Z")

</div>

다크 모드 확인란을 활성화하면(프랑스어로 "Mode sombre"가 다크 모드를 의미한다고 가정합니다) 해당 토글이 표시될 것입니다. 한 번 시도해 보시겠어요?

위 마지막 게시글에서 언급한 색상 팔레트 설정은 사이트에서 사용자가 선택할 수 있는 다크 팔레트가 여러 개일 때 표시됩니다. 사용 가능한 색상 팔레트가 하나뿐이라면 드롭다운 메뉴 대신 여러분이 보고 계신 확인란이 표시됩니다.

---

<div class="post-metadata">

### Author: ![Andrew\_Rowe](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/andrew_rowe/32/445877_2.png) [@Andrew\_Rowe](https://meta.discourse.org/u/Andrew_Rowe)
#### Post date: [2월 8, 2025, 1:09오전 UTC](https://meta.discourse.org/t/dark-light-mode-toggle-now-available-in-core/350991/10 "2025-02-08T01:09:30Z")

</div>

정말 죄송합니다… 이 기능을 켜는 설정이 어디에 있나요?  
설치가 필요 없는 건가요?  
새로운 관리자 인터페이스에서 좀 헤매고 있습니다.

---

<div class="post-metadata">

### Author: ![StefanoCecere](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/stefanocecere/32/158064_2.png) [@StefanoCecere](https://meta.discourse.org/u/StefanoCecere)
#### Post date: [2월 9, 2025, 4:26오전 UTC](https://meta.discourse.org/t/dark-light-mode-toggle-now-available-in-core/350991/11 "2025-02-09T04:26:07Z")

</div>

모바일 / 아이폰에서는 표시되지 않음

데스크톱에서는: 완벽합니다.

이전 버전(컴포넌트 버전)에서는 표시되던 것 같습니다.

---

<div class="post-metadata">

### Author: ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [2월 9, 2025, 6:37오전 UTC](https://meta.discourse.org/t/dark-light-mode-toggle-now-available-in-core/350991/12 "2025-02-09T06:37:30Z")

</div>

일부 iPhone과 포럼이 정상 작동하는 것을 보여드리고 있습니다.

 ![The image shows an opened mobile menu on the left with various options and settings in Finnish, alongside a blurred background indicating another page or app on the right. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/d/d/7/dd70164c4636edb3799dce9239ae1c876f60a2f9.png)

이는 코어에 포함된 것이므로, 안전 모드에서 실행할 때 표시되어야 할 것 같습니다. 만약 그렇다면 다른 구성 요소, 테마 또는 플러그인과 충돌이 있는 것입니다.

그렇지 않은 경우

- Discourse가 최신 버전이 아닙니다.
- 사이트 설정에서 해당 토글이 활성화되어 있지 않습니다.
- 사이트 레벨 또는 사용자 설정에서 다크 모드가 활성화되어 있지 않습니다.

---

<div class="post-metadata">

### Author: ![StefanoCecere](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/stefanocecere/32/158064_2.png) [@StefanoCecere](https://meta.discourse.org/u/StefanoCecere)
#### Post date: [2월 9, 2025, 3:28오후 UTC](https://meta.discourse.org/t/dark-light-mode-toggle-now-available-in-core/350991/13 "2025-02-09T15:28:23Z")

</div>

기묘한 게 며칠 전까지만 해도 잘 작동하고 있었거든요.

며칠 뒤에 다시 올게요.. 그때를 봐야겠네요.  
감사합니다

---

<div class="post-metadata">

### Author: ![StefanoCecere](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/stefanocecere/32/158064_2.png) [@StefanoCecere](https://meta.discourse.org/u/StefanoCecere)
#### Post date: [2월 9, 2025, 4:19오후 UTC](https://meta.discourse.org/t/dark-light-mode-toggle-now-available-in-core/350991/15 "2025-02-09T16:19:51Z")

</div>

저는 이 두 가지 옵션이 없어요… 그냥 일반적인 것만 있거든요…

---

<div class="post-metadata">

### Author: ![StefanoCecere](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/stefanocecere/32/158064_2.png) [@StefanoCecere](https://meta.discourse.org/u/StefanoCecere)
#### Post date: [2월 9, 2025, 4:21오후 UTC](https://meta.discourse.org/t/dark-light-mode-toggle-now-available-in-core/350991/16 "2025-02-09T16:21:43Z")

</div>

![Screenshot 2025-02-09 at 17.20.23](https://global.discourse-cdn.com/meta/original/4X/5/9/8/5983040656b024f74f532e94652bc099d9dc5357.png)

찾았어요! 하지만 좀 어려웠어요 🙂  
여러 설정과 개인 환경 설정이 섞여 있어서… 테마에 두 가지 색상 스킴(다크 모드와 라이트 모드)을 적용하는 과정을 더 쉽게 만들어야 한다고 생각합니다.

---

<div class="post-metadata">

### Author: ![patrickemin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/patrickemin/32/520162_2.png) [@patrickemin](https://meta.discourse.org/u/patrickemin)
#### Post date: [2월 10, 2025, 3:00오후 UTC](https://meta.discourse.org/t/dark-light-mode-toggle-now-available-in-core/350991/17 "2025-02-10T15:00:14Z")

</div>

> [@Osama](#):
>
> 다크 모드 체크박스(프랑스어로 “Mode sombre”가 다크 모드를 의미한다고 가정합니다)를 활성화하면 해당 토글이 표시될 것 같습니다. 한번 시도해 볼 수 있을까요?

아니요, 사이드바 하단에 표시되지 않습니다.

---

<div class="post-metadata">

### Author: ![Osama](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/osama/32/98013_2.png) [@Osama](https://meta.discourse.org/u/Osama)
#### Post date: [2월 10, 2025, 5:25오후 UTC](https://meta.discourse.org/t/dark-light-mode-toggle-now-available-in-core/350991/18 "2025-02-10T17:25:18Z")

</div>

> [@Andrew\_Rowe](#):
>
> 정말 죄송합니다… 이 기능을 켜는 설정은 어디에 있나요?  
> 설치가 필요 없나요?  
> 새로운 관리자 인터페이스에 익숙하지 않아서 좀 헤매고 있습니다.

사이트에서 `/admin/site_settings/category/all_results?filter=interface_color_selector` 경로로 이동하면 해당 설정을 볼 수 있어야 합니다.

> [@patrickemin](#):
>
> 아니요, 사이드바 하단에 표시되지 않습니다.

휴대폰/컴퓨터의 시스템 설정을 라이트에서 다크로(또는 그 반대) 변경했을 때, Discourse 인터페이스가 시스템 설정에 맞춰 변경되나요, 아니면 그대로 유지되나요(라이트 또는 다크 모드)?

핵심 선택기가 여기와 다른 많은 사이트에서 정상적으로 작동하고 있으므로, 선택기가 표시되지 않도록 하는 설정 문제가 어딘가에 있을 것입니다. 계정에 로그인한 상태에서 브라우저 콘솔에서 다음 명령을 실행했을 때의 출력을 공유해 주시겠습니까?

```plaintext
(({dark_scheme_id, color_scheme_id}) => { return {dark_scheme_id, color_scheme_id}} )((await (await fetch(`/u/${Discourse.User.current().username}.json`)).json()).user.user_option)

```

```plaintext
Discourse.SiteSettings.default_dark_mode_color_scheme_id

```

---

<div class="post-metadata">

### Author: ![patrickemin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/patrickemin/32/520162_2.png) [@patrickemin](https://meta.discourse.org/u/patrickemin)
#### Post date: [2월 10, 2025, 6:03오후 UTC](https://meta.discourse.org/t/dark-light-mode-toggle-now-available-in-core/350991/19 "2025-02-10T18:03:12Z")

</div>

안녕하세요, 제 설정은 정상입니다 (사이드바 하단). 모바일이나 PC에서 다크 모드로 전환해도 아무런 변화가 없고, 콘솔은 사용 방법을 몰라요. 죄송합니다 😬

---

<div class="post-metadata">

### Author: ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [2월 10, 2025, 6:07오후 UTC](https://meta.discourse.org/t/dark-light-mode-toggle-now-available-in-core/350991/20 "2025-02-10T18:07:47Z")

</div>

하지만 시스템 설정 및/또는 개인 설정에서 설정한 다크 모드 색상이 올바르게 설정되어 있지 않을 수 있습니다.

---

<div class="post-metadata">

### Author: ![patrickemin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/patrickemin/32/520162_2.png) [@patrickemin](https://meta.discourse.org/u/patrickemin)
#### Post date: [2월 10, 2025, 6:11오후 UTC](https://meta.discourse.org/t/dark-light-mode-toggle-now-available-in-core/350991/21 "2025-02-10T18:11:17Z")

</div>

아마도 그럴 거예요. 저는 그런 유형의 설정을 항상 어려워했거든요. 하지만 크게 중요한 건 아니니 그대로 두겠습니다. 도와주려 해주셔서 감사합니다.

[Next page](https://meta.discourse.org/t/dark-light-mode-toggle-now-available-in-core/350991.md?page=2)
