안녕하세요, 다음 두 주제에서 설명된 문제가
저에게도 여전히 발생하고 있습니다(호스팅된 Discourse의 최신/시험 버전 테스트 중).
@mk0r 저는 Meta에서 이 문제를 재현할 수 없습니다. 저는 Meta의 기본 테마가 아닌 Grey Amber 테마/색상을 사용하고 있습니다:
그리고 제 경우 theme-color 메타 태그에 올바른 색상이 표시됩니다:
<meta name="theme-color" content="#36393e">
#36393e는 Grey Amber 스킴의 헤더 배경색입니다. 로그인하지 않은 상태에서 시크릿 창으로 Meta를 열면, theme-color 메타 태그에는 기본 색상 스킴(라이트 스킴)의 헤더 배경색이 표시됩니다:
<meta name="theme-color" content="#ffffff">
사이트에 대한 브라우저 캐시/쿠키를 정리해 보셨나요? 그래도 해결되지 않는다면, Meta에서 이 문제를 재현해 볼 수 있는지 시도해 보시고 문제 재현 단계를 공유해 주시겠습니까?
2개의 좋아요
확인해 주셔서 감사합니다. 재현이 가능했으며, 구체적으로 다크 모드와 관련된 문제입니다.
적어도 제 경우, meta 사이트와 제 설치 환경 모두에서 theme-color는 기본/라이트 모드와 동일하게 유지됩니다.
head에 다음을 추가해 보기도 했습니다:
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />
소스에는 표시되지만 아무런 효과가 없습니다. 아마도 첫 번째 메타 태그에 prefers-color-scheme: light가 명시되어 있지 않기 때문일까요?
제게는 모바일에서 밝은 상태 바가 어두운 페이지와 매우 어색하게 대비되고, 새로고침 시 스크롤 영역이 밝은 흰색으로 표시되는 것이 주요 문제입니다.
이 문제가 제 상황과 동일한 것 같아 댓글을 달려고 방금 가입했습니다.
진행형 웹 앱(PWA)이라고 부르는 것으로 추정되는 기능을 사용 중입니다 (Android 13에서 Chrome으로 Discourse 포럼을 볼 때 앱 설치 옵션을 선택하는 방식이며, 이 경우 해당 사이트는 https://llllllll.co/입니다). 앱은 시스템 다크 모드 설정을 올바르게 반영하지만, 상태바는 라이트 모드로 유지됩니다. 이 문제는 Chrome에서는 발생하지 않습니다. 아래 이미지를 참조하세요: 왼쪽은 앱, 오른쪽은 Chrome 브라우저입니다.
2개의 좋아요
이 문제가 주목을 받지 못해서 아쉽네요 
pull request를 작성할 정도로 기술적으로 숙련되지는 않았지만, 이 문제는 꽤 단순한 수정으로 해결될 수 있지 않을까요? 사소해 보일 수 있지만, 미적 측면과 기능적 측면에서 이 문제가 수정되길 바랍니다 
지난주에 이 문제를 다시 살펴보니, 다음 단계를 통해 해당 버그를 재현할 수 있었습니다:
-
운영체제(OS)를 다크 모드로 설정합니다. (Windows 11의 경우 설정 → 개인 설정 → 색상 → 모드 선택에서 설정할 수 있습니다)
-
Discourse 설정에서 일반 모드와 다크 모드에 서로 다른 색상 스킴을 선택한 후 페이지를 새로고침합니다.
-
이제 다크 모드로 선택한 색상 스킴이 UI에 적용되는 것을 볼 수 있습니다(기대했던 동작과 동일). 그러나
theme-color메타 태그에는 라이트 모드로 선택한 색상 스킴의header_background색상 값이 포함되어 있습니다. 원래라면 다크 모드의 값이 포함되어야 합니다.
이 문제를 수정하는 것은 다소 까다롭습니다. 서버 측에서 모든 메타 태그가 렌더링되는데, 클라이언트/브라우저가 라이트 모드인지 다크 모드인지 색상 스킴을 사용할지 여부에 대한 컨텍스트를 가지고 있지 않기 때문입니다. 우리는 단순히 라이트와 다크 스킴 모두에 대한 색상 정의를 포함시키고, 클라이언트/브라우저가 prefers-color-scheme 미디어 쿼리에 따라 사용자의 선호도에 맞는 스킴을 선택하도록 합니다.
하지만 theme-color 메타 태그는 media 속성을 지원하는 것으로 보입니다. 따라서 media를 (prefers-color-scheme: dark)로 설정한 또 다른 theme-color 메타 태그를 다크 스킴에 포함할 수 있어야 합니다. 이번 주 안에 이 작업을 완료해 보겠습니다.
5개의 좋아요
첫 번째 메타 태그에서 라이트 또는 다크 모드를 지정하지 않고 두 번째 메타 태그에서 다크 모드를 지정하더라도, 다크 모드가 여전히 첫 번째 태그에서 가져오는 경우가 있을 수 있습니다. 따라서 라이트 모드와 다크 모드 모두에 대해 두 개의 태그를 모두 지정해야 한다고 생각합니다.
2개의 좋아요
네, 제 변경 사항으로 인해 라이트 스킴용 메타 태그에는 media="(prefers-color-scheme: light)"가, 다크 스킴용 메타 태그에는 media="(prefers-color-scheme: dark)"가 적용될 것이며, 브라우저는 사용자의 환경 설정에 맞는 태그를 선택할 수 있어야 합니다.
3개의 좋아요
참고로 @mk0r, 이 문제를 2일 전에 다음 커밋에서 수정했습니다:
3개의 좋아요
감사합니다 
정말 멋진 것 같지만, unfortunately 제 환경에서는 작동하지 않습니다. media="all"이 다크 모드에서도 media="(prefers-color-scheme: dark")를 덮어쓰는 것 같습니다.
1개의 좋아요
음, 어떻게 테스트하고 있고 어떤 브라우저를 사용하시는지 공유해 주실 수 있나요?
1개의 좋아요
아 네, 맞아요. 죄송합니다. 깜빡했네요.
다음 환경에서 시도해 보았습니다:
Android 12
Chrome 106.0.5249.126 PWA
MacOS 12.4
Chrome 105.0.5195.125 PWA
1개의 좋아요
GitHub에서 좋아요를 받은 수정 사항을 확인해 보니, 문제가 제가 이전 메시지에서 설명한 내용일 수 있습니다.
제 기술 수준을 훨씬 벗어나는 말을 하고 있는 것 같지만, 다음 코드 라인들을 보고 있었습니다:
it "renders theme-color meta for the light scheme with media=all and another one for the dark scheme with media=(prefers-color-scheme: dark)" do
expect(helper.discourse_theme_color_meta_tags).to eq(<<~HTML)
<meta name="theme-color" media="all" content="#abcdef">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#defabc">
HTML
사용자가 다크 모드에 있더라도 meta name="theme-color" media="all"가 meta name="theme-color" media="(prefers-color-scheme: dark)"보다 우선순위가 높다고 생각합니다.
아래 링크들을 참고해 주세요:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color
그리고
https://web.dev/learn/design/theming/
제 생각에는 올바르게 작동하려면 최종 렌더링된 페이지에 다음 라인들이 포함되어야 합니다:
<meta name="color-scheme" content="light dark">
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">
여기서 16진수 값들은 선택된 컬러 스킴의 값으로 대체되어야 합니다.
설치 환경이나 테마에 별도의 다크 모드 컬러 스킴이 없다면 값들은 그냥 동일하게 두면 됩니다.
이건 좀 예민한 지적일 수 있지만 실제로 차이를 만들므로 이 수정이 매우 고맙습니다. 대안으로, 사용자 관리 인터페이스를 통해 all 또는 다크/라이트 모드 모두에 대한 theme-color를 선택할 수 있도록 하는 방법도 있을 것 같습니다. 혹은 theme-color를 아예 설정하지 않아서 디바이스가 브라우저 UI 색상을 설정하고 사용자의 다크/라이트 설정을 존중하도록 하는 방법도 있습니다.
도움이 되길 바랍니다 
2개의 좋아요
)네, 감사합니다 이제 완벽하게 작동합니다! 
3개의 좋아요
이 주제는 2일 후 자동으로 닫혔습니다. 새로운 답변은 더 이상 허용되지 않습니다.