지난주에 이 문제를 다시 살펴보니, 다음 단계를 통해 해당 버그를 재현할 수 있었습니다:
-
운영체제(OS)를 다크 모드로 설정합니다. (Windows 11의 경우 설정 → 개인 설정 → 색상 → 모드 선택에서 설정할 수 있습니다)
-
Discourse 설정에서 일반 모드와 다크 모드에 서로 다른 색상 스킴을 선택한 후 페이지를 새로고침합니다.
-
이제 다크 모드로 선택한 색상 스킴이 UI에 적용되는 것을 볼 수 있습니다(기대했던 동작과 동일). 그러나
theme-color메타 태그에는 라이트 모드로 선택한 색상 스킴의header_background색상 값이 포함되어 있습니다. 원래라면 다크 모드의 값이 포함되어야 합니다.
이 문제를 수정하는 것은 다소 까다롭습니다. 서버 측에서 모든 메타 태그가 렌더링되는데, 클라이언트/브라우저가 라이트 모드인지 다크 모드인지 색상 스킴을 사용할지 여부에 대한 컨텍스트를 가지고 있지 않기 때문입니다. 우리는 단순히 라이트와 다크 스킴 모두에 대한 색상 정의를 포함시키고, 클라이언트/브라우저가 prefers-color-scheme 미디어 쿼리에 따라 사용자의 선호도에 맞는 스킴을 선택하도록 합니다.
하지만 theme-color 메타 태그는 media 속성을 지원하는 것으로 보입니다. 따라서 media를 (prefers-color-scheme: dark)로 설정한 또 다른 theme-color 메타 태그를 다크 스킴에 포함할 수 있어야 합니다. 이번 주 안에 이 작업을 완료해 보겠습니다.