음, 문제는 각 색상 테마에서 “사용자가 이것을 선택할 수 있습니다…” 같은 항목이 체크되어 있지 않았던 것 같네요. 이제 작동합니다.
특정 카테고리 2개에만 영향을 미치는 버그가 있는 것 같습니다.
다크 모드로 있을 때 새로고침을 하면 Might 사이트 로고가 표시됩니다. 라이트 모드로 전환했다가 다시 다크 모드로 바꾸면 해결됩니다. 하지만 새로고침을 하면 다시 발생합니다.
새로고침 후
좀 더 구체적으로 말씀드리면, 로고 관련 주제만 그런 것 같습니다. 해당 카테고리 내 다른 주제들은 문제가 없어 보입니다. 이 카테고리 안의 다른 주제들은 영향을 받지 않습니다. 해당 주제에 로고 2개가 업로드되어 있는 것과 관련이 있을까요?
수정하면 페이지가 처음 로드될 때도 그런 것 같습니다. 그래서 Discourse의 브라우저 기반 다크 모드 감지 기능에 문제가 있는 것일까요?
이 문제를 재현할 수 없습니다. 어떤 단계, 브라우저, 장치를 사용하셨는지 자세히 설명해 주시겠어요?
사용자들이 다크 모드를 수동으로 전환한 후, 장치가 다시 라이트 모드로 돌아가면 포럼이 자동으로 라이트 모드로 전환된다고 보고했습니다.
재현 방법:
- 장치 설정을 라이트 모드로 설정합니다.
- 사이드바의 토글 버튼을 활성화합니다.
- 장치에서 다크 모드를 활성화합니다.
- 장치에서 다크 모드를 비활성화합니다.
→ Discourse 인스턴스가 라이트 모드로 전환됩니다. 사용자가 수동으로 다크 모드로 전환했으므로, 포럼이 다크 모드로 유지되는 것이 기대되는 동작입니다.
결국, 다크 모드, 라이트 모드, 자동 전환(켜기/끄기) 사이에서 전환할 수 있는 기존 동작의 옵션을 제공해 주시면 좋겠습니다.
저는 LG G8X ThinQ (thev9ne) 듀얼 스크린 케이스를 사용 중이며, 안드로이드 10을 실행하고 있는 것 같습니다.
앱을 전환했다가 다시 돌아올 때, 다크 모드로 전환되기 전에 라이트 테마가 잠시 로드되는 것처럼 보입니다. 윈도우의 스킨 변경과 비슷한 현상입니다. 라이트 로고(모바일 로고)가 그대로 남아 있습니다.
@jrgong 님의 재현 방법과 추정 원인에 대한 설명도 저와 동일합니다.
브라우저는 라이트 모드이며, 토글이 다크 모드를 전환/강제 적용하고 있습니다. 그런 다음 Discourse가 일부 라이트 모드로 전환됩니다.
새로고침을 하거나 링크를 새 탭으로 열 때 반대쪽 색상 스킴이 순간적으로 깜빡이는 것을 볼 수 있습니다. 또한, 어떤 이유에선지 새 답글을 게시한 후에도 비슷한 깜빡임이 발생합니다.
저는 라이트 테마를 활성화해 두었고, 운영체제는 다크 모드로 설정되어 있습니다. 그래서 라이트 모드로 다시 전환할 때 차이가 드러납니다.
아마도 클라이언트 측에서 색상이 전환되는 것 같지만, 사용자 설정은 그대로인 것 같습니다. 전환 시 사용자 “색상 스킴” 설정을 업데이트하도록 하면 이 문제를 피할 수 있을까요? 클라이언트 측 전환이 매끄러운 전환을 제공하고, 사용자 설정을 변경하면 새로고침 시 반대쪽 색상 스킴이 잠시 나타나는 깜빡임을 방지할 수 있을 것입니다.
@jordan.vidrine 이 문제를 다시 한번 언급하고 싶었습니다. ![]()
새 헤더의 드롭다운에 표시되어야 합니다. (사이드바 역할을 하지만 드롭다운 형태로 구현된 그 드롭다운입니다)
@awesomerobot 와 @jrgong 업데이트를 공유합니다. 이 문제를 확인하겠습니다. ![]()
안타깝게도 그렇게 되지 않았습니다. 하지만 이제 그 이유를 알았습니다.
navigation_menu가 Header-Drop-Down으로 설정되어 있었지만 해당 옵션을 볼 수 없었습니다. 그런데 add_color_scheme_toggle_to_header를 꺼놓자 드롭다운에 옵션이 나타났습니다. 즉, 이 옵션은 한 곳에만 표시되는 것 같습니다.
감사합니다! ![]()
이 컴포넌트는 "light"와 “dark” 색상 스킴을 선택할 수 있지만, @media (prefers-color-scheme)가 무시되어 실제 라이트 모드와 다크 모드 간의 전환은 이루어지지 않습니다.
다음과 같은 테마 컴포넌트가 있다고 가정해 보겠습니다.
CSS
@media (prefers-color-scheme: light) {
.darkonly { display: none; }
}
@media (prefers-color-scheme: dark) {
.lightonly { display: none; }
}
그리고 HEAD
<script type='text/x-handlebars' data-template-name='/connectors/above-site-header/darkdetector'>
<span class="darkonly">Dark</span><span class="lightonly">Light</span>
</script>
이 경우, 다크 "모드"가 활성화되어 있더라도 텍스트는 "light"로 표시됩니다(더 정확하게 표현하자면, 선택된 색상 스킴과 무관하게 운영체제의 다크 모드 설정에 따라 “dark” 또는 “light” 중 하나가 표시됩니다).
이 문제에 대한 해결책이 있을까요? 이러한 미디어 쿼리에 의존하는 요소가 꽤 많습니다.
Discourse가 Windows XP와 비슷하다면, 브라우저/OS는 라이트 모드로 두고 Discourse만 다크 모드로 설정해 보세요. Windows XP에서는 색상 스킴이 항상 기본 설정 위에 오버레이됩니다.
사용자가 선택할 수 있는 다크 컬러 스킴이 하나 이상이면 두 개의 드롭다운이 나타나고 토글 아이콘이 표시됩니다.

사용자가 선택할 수 있는 다크 컬러 스킴이 단 하나뿐이면 ‘다크’ 드롭다운은 사라지고 대신 ‘자동 다크 모드’ 체크박스가 나타납니다.
사용자가 "에이, 자동은 안 되고 토글을 쓰고 싶다"라고 생각하여 ‘자동’ 체크박스를 해제하면 토글이 사라집니다.
따라서 수동 토글을 사용하려면 자동 전환을 활성화해야 합니다. ![]()
즉, iPhone의 노치는 헤더 HTML에 주입되는
<meta name="theme-color" media="(prefers-color-scheme: ...)" content="#...">
태그를 사용하여 색상을 설정합니다. 이는 디바이스가 다크 모드인 상태에서 토글러가 라이트 색상 스킴을 선택했거나, 디바이스가 라이트 모드인 상태에서 토글러가 다크 색상 스킴을 선택한 경우, iPhone 노치의 색상이 잘못 표시됨을 의미합니다.
이 동작은 의도된 것이 아닌 것 같습니다:
현재 시스템 색상이 다크 모드로 설정되어 있습니다. 라이트/다크 테마를 위해 흑백 로고를 사용하고 있습니다.
- 인스턴스에서 테마를 라이트로 설정합니다.
- 토픽 페이지를 방문합니다.
- 처음에는 올바른 로고가 로드되지만:
- 아래로 스크롤했다가 위로 스크롤합니다(헤더가 전체 로고 > 토픽 제목 > 전체 로고로 전환되어야 합니다).
- 위로 다시 스크롤할 때(예: 토픽 제목이 다시 전체 로고로 바뀔 때), 잘못된 로고(흰색 배경에 흰색)가 표시됩니다.
로컬에서 이 문제를 재현해 보고 있는데, 선택 가능한 다크 컬러 스킴이 하나뿐인 경우에도 자동 모드 대신 여전히 드롭다운 메뉴가 표시됩니다. (관리자 설정에서)
재현 방법:
- 오늘 아침 기준으로 기본 설치된 빈 Discourse 환경
- 내 프로필 → 인터페이스에서 이 부분을 확인
- dracula, solarized dark, WCAG dark 컬러 스킴 제거
- 프로필로 돌아가기
- 드롭다운이 사라지고 “다크 모드” 제목과 체크박스가 나타나는 것을 확인
interface.hbs의 showDarkColorSchemeSelector와 showDarkModeToggle에 의해 제어됩니다. 또한 interface.js의 주석도 참고하세요.
@discourseComputed("userSelectableDarkColorSchemes")
showDarkColorSchemeSelector(darkSchemes) {
// 기본 다크 스킴이 설정된 경우
// 드롭다운에는 두 항목(비활성화 / 사이트 기본값 사용)이 있지만
// 해당 경우에는 체크박스를 표시합니다
const minToShow = this.defaultDarkSchemeId > 0 ? 2 : 1;
return darkSchemes && darkSchemes.length > minToShow;
},
이렇게 자세한 답변을 주셔서 감사합니다. 저는 단순히 이 다크 테마를 선택할 수 없도록 막아 놓은 것뿐이었으니, 이제 이 테마들을 아예 삭제하는 방식으로 테스트를 해보겠습니다.
네, 좋은 엣지 케이스를 찾아주셨네요. 이 토글은 사용자가 discourse-core 개인 설정도 활성화한 경우에만 이 시나리오에서 작동합니다.
해당 인스턴스에서도 작동하도록 수정하겠습니다.




