다크/라이트 모드 전환

음, 문제는 각 색상 테마에서 “사용자가 이것을 선택할 수 있습니다…” 같은 항목이 체크되어 있지 않았던 것 같네요. 이제 작동합니다.

2개의 좋아요

특정 카테고리 2개에만 영향을 미치는 버그가 있는 것 같습니다.

다크 모드로 있을 때 새로고침을 하면 Might 사이트 로고가 표시됩니다. 라이트 모드로 전환했다가 다시 다크 모드로 바꾸면 해결됩니다. 하지만 새로고침을 하면 다시 발생합니다.

새로고침 후

좀 더 구체적으로 말씀드리면, 로고 관련 주제만 그런 것 같습니다. 해당 카테고리 내 다른 주제들은 문제가 없어 보입니다. 이 카테고리 안의 다른 주제들은 영향을 받지 않습니다. 해당 주제에 로고 2개가 업로드되어 있는 것과 관련이 있을까요?

1개의 좋아요

수정하면 페이지가 처음 로드될 때도 그런 것 같습니다. 그래서 Discourse의 브라우저 기반 다크 모드 감지 기능에 문제가 있는 것일까요?

2개의 좋아요

이 문제를 재현할 수 없습니다. 어떤 단계, 브라우저, 장치를 사용하셨는지 자세히 설명해 주시겠어요?

2개의 좋아요

사용자들이 다크 모드를 수동으로 전환한 후, 장치가 다시 라이트 모드로 돌아가면 포럼이 자동으로 라이트 모드로 전환된다고 보고했습니다.

재현 방법:

  1. 장치 설정을 라이트 모드로 설정합니다.
  2. 사이드바의 토글 버튼을 활성화합니다.
  3. 장치에서 다크 모드를 활성화합니다.
  4. 장치에서 다크 모드를 비활성화합니다.

→ Discourse 인스턴스가 라이트 모드로 전환됩니다. 사용자가 수동으로 다크 모드로 전환했으므로, 포럼이 다크 모드로 유지되는 것이 기대되는 동작입니다.

결국, 다크 모드, 라이트 모드, 자동 전환(켜기/끄기) 사이에서 전환할 수 있는 기존 동작의 옵션을 제공해 주시면 좋겠습니다.

3개의 좋아요

저는 LG G8X ThinQ (thev9ne) 듀얼 스크린 케이스를 사용 중이며, 안드로이드 10을 실행하고 있는 것 같습니다.

앱을 전환했다가 다시 돌아올 때, 다크 모드로 전환되기 전에 라이트 테마가 잠시 로드되는 것처럼 보입니다. 윈도우의 스킨 변경과 비슷한 현상입니다. 라이트 로고(모바일 로고)가 그대로 남아 있습니다.

@jrgong 님의 재현 방법과 추정 원인에 대한 설명도 저와 동일합니다.

브라우저는 라이트 모드이며, 토글이 다크 모드를 전환/강제 적용하고 있습니다. 그런 다음 Discourse가 일부 라이트 모드로 전환됩니다.

1개의 좋아요

새로고침을 하거나 링크를 새 탭으로 열 때 반대쪽 색상 스킴이 순간적으로 깜빡이는 것을 볼 수 있습니다. 또한, 어떤 이유에선지 새 답글을 게시한 후에도 비슷한 깜빡임이 발생합니다.

저는 라이트 테마를 활성화해 두었고, 운영체제는 다크 모드로 설정되어 있습니다. 그래서 라이트 모드로 다시 전환할 때 차이가 드러납니다.

아마도 클라이언트 측에서 색상이 전환되는 것 같지만, 사용자 설정은 그대로인 것 같습니다. 전환 시 사용자 “색상 스킴” 설정을 업데이트하도록 하면 이 문제를 피할 수 있을까요? 클라이언트 측 전환이 매끄러운 전환을 제공하고, 사용자 설정을 변경하면 새로고침 시 반대쪽 색상 스킴이 잠시 나타나는 깜빡임을 방지할 수 있을 것입니다.

5개의 좋아요

@jordan.vidrine 이 문제를 다시 한번 언급하고 싶었습니다. :slight_smile:

2개의 좋아요

새 헤더의 드롭다운에 표시되어야 합니다. (사이드바 역할을 하지만 드롭다운 형태로 구현된 그 드롭다운입니다)

1개의 좋아요

@awesomerobot 와 @jrgong 업데이트를 공유합니다. 이 문제를 확인하겠습니다. :+1:

2개의 좋아요

안타깝게도 그렇게 되지 않았습니다. 하지만 이제 그 이유를 알았습니다.

navigation_menu가 Header-Drop-Down으로 설정되어 있었지만 해당 옵션을 볼 수 없었습니다. 그런데 add_color_scheme_toggle_to_header를 꺼놓자 드롭다운에 옵션이 나타났습니다. 즉, 이 옵션은 한 곳에만 표시되는 것 같습니다.

감사합니다! :slight_smile:

2개의 좋아요

이 컴포넌트는 "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” 중 하나가 표시됩니다).

이 문제에 대한 해결책이 있을까요? 이러한 미디어 쿼리에 의존하는 요소가 꽤 많습니다.

3개의 좋아요

Discourse가 Windows XP와 비슷하다면, 브라우저/OS는 라이트 모드로 두고 Discourse만 다크 모드로 설정해 보세요. Windows XP에서는 색상 스킴이 항상 기본 설정 위에 오버레이됩니다.

사용자가 선택할 수 있는 다크 컬러 스킴이 하나 이상이면 두 개의 드롭다운이 나타나고 토글 아이콘이 표시됩니다.

image

사용자가 선택할 수 있는 다크 컬러 스킴이 단 하나뿐이면 ‘다크’ 드롭다운은 사라지고 대신 ‘자동 다크 모드’ 체크박스가 나타납니다.

사용자가 "에이, 자동은 안 되고 토글을 쓰고 싶다"라고 생각하여 ‘자동’ 체크박스를 해제하면 토글이 사라집니다.

따라서 수동 토글을 사용하려면 자동 전환을 활성화해야 합니다. :thinking:

5개의 좋아요

즉, iPhone의 노치는 헤더 HTML에 주입되는

<meta name="theme-color" media="(prefers-color-scheme: ...)" content="#...">

태그를 사용하여 색상을 설정합니다. 이는 디바이스가 다크 모드인 상태에서 토글러가 라이트 색상 스킴을 선택했거나, 디바이스가 라이트 모드인 상태에서 토글러가 다크 색상 스킴을 선택한 경우, iPhone 노치의 색상이 잘못 표시됨을 의미합니다.

1개의 좋아요

이 동작은 의도된 것이 아닌 것 같습니다:

현재 시스템 색상이 다크 모드로 설정되어 있습니다. 라이트/다크 테마를 위해 흑백 로고를 사용하고 있습니다.

  1. 인스턴스에서 테마를 라이트로 설정합니다.
  2. 토픽 페이지를 방문합니다.
  3. 처음에는 올바른 로고가 로드되지만:
  4. 아래로 스크롤했다가 위로 스크롤합니다(헤더가 전체 로고 > 토픽 제목 > 전체 로고로 전환되어야 합니다).
  5. 위로 다시 스크롤할 때(예: 토픽 제목이 다시 전체 로고로 바뀔 때), 잘못된 로고(흰색 배경에 흰색)가 표시됩니다.
2개의 좋아요

로컬에서 이 문제를 재현해 보고 있는데, 선택 가능한 다크 컬러 스킴이 하나뿐인 경우에도 자동 모드 대신 여전히 드롭다운 메뉴가 표시됩니다. (관리자 설정에서)

재현 방법:

  • 오늘 아침 기준으로 기본 설치된 빈 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;
  },

2개의 좋아요

:star_struck: 이렇게 자세한 답변을 주셔서 감사합니다. 저는 단순히 이 다크 테마를 선택할 수 없도록 막아 놓은 것뿐이었으니, 이제 이 테마들을 아예 삭제하는 방식으로 테스트를 해보겠습니다.

1개의 좋아요

네, 좋은 엣지 케이스를 찾아주셨네요. 이 토글은 사용자가 discourse-core 개인 설정도 활성화한 경우에만 이 시나리오에서 작동합니다.

해당 인스턴스에서도 작동하도록 수정하겠습니다.

4개의 좋아요