다크/라이트 모드 전환

이 컴포넌트를 정말 좋아합니다! :heart_eyes: 그런데 작은 문제가 하나 있습니다.

컴포넌트가 “자동 다크 모드 색상 스키마 활성화” 옵션이 켜져 있을 때만 작동하는 것 같습니다. 제 문제는 해당 옵션이 켜져 있고 시스템 설정이 다크 모드로 되어 있을 때(즉, 선호 색상 스키마: 다크) 발생합니다.

위와 같은 상황에서 설정 > 인터페이스 > 테마를 통해 라이트 테마로 전환을 시도하면 아무 반응이 없는데, 저로서는 괜찮습니다. 제 시스템 설정이 이미 다크 모드로 되어 있으므로 Discourse에서 라이트 모드로 전환해도 이를 무시하지 않는 것으로 보입니다.

다크/라이트 모드 토글 컴포넌트로 같은 작업을 수행하고, Discourse의 테마 설정이 라이트로 되어 있으면 토글을 통해 실제로 라이트 모드로 전환할 수 있습니다(제 생각에는 이쪽이 훨씬 좋습니다). 하지만 헤더의 사이트 로고는 여전히 다크 모드 상태로 남아 라이트 모드에서는 잘 보이지 않습니다. 인스펙터를 확인해 보니 해당 요소는 다음과 같이 보입니다:

<div class="title"><a href="/" data-auto-route="true"><picture><source srcset="<link to image>" media="(prefers-color-scheme: dark)"><img src="<link to image>" id="site-logo" class="logo-big"></picture></a></div>

토글을 통해 현재 라이트 모드로 설정되어 있음에도 media=“(prefers-color-scheme: dark)” 부분이 여전히 남아 있는 것을 확인했습니다.

추가로, Discourse의 “자동 다크 모드 색상 스키마 활성화” 옵션이 해제되어 있으면 사이트 로고는 라이트/다크 모드 간에 정상적으로 전환됩니다. 하지만 이렇게 하면 다크/라이트 모드 토글이 표시되지 않습니다 :man_shrugging:t2:

또한, Discourse의 설정 > 인터페이스 > 테마에서 테마 설정을 다크로 하고 시스템 설정도 다크로 되어 있으면, 토글을 통해 라이트/다크 모드 간 전환이 불가능하며 항상 다크 테마로 고정됩니다.

이상적으로는 현재처럼 다크/라이트 모드 토글 컴포넌트가 작동하면서, 헤더의 사이트 로고가 사용자의 시스템 선호 색상 스키마가 아닌 현재 활성화된 라이트/다크 설정을 따르도록 하는 것이 좋습니다.

1개의 좋아요