다크/라이트 모드 전환

[Discourse]

이 테마 컴포넌트는 더 이상 사용되지 않습니다(deprecated). 자세한 내용은 Dark/light mode toggle now available in core 를 참조하세요.

	요약	Dark/Light Mode Toggle은 햄버거 메뉴에 클릭 가능한 색상 스킴 토글 버튼을 추가합니다. 이 토글은 한 테마에서 라이트 또는 다크 색상 스킴으로 전환합니다.
	리포지토리 링크	https://github.com/discourse/discourse-color-scheme-toggle
	Discourse 테마가 처음이신가요?	Discourse 테마 사용 초보자 가이드

이 테마 컴포넌트 설치

이는 Discourse 팀이 유지 관리하는 official 테마 컴포넌트이므로, Support, Contribute > Bug, Contribute > UX, Contribute > Feature 요청은 Meta의 해당 카테고리에서 할 수 있으며, 적절한 테마 컴포넌트 태그가 지정됩니다. 아래 링크를 클릭하여 시작하세요.

 지원(Support)  버그(Bug)  UX  기능(Feature)

기능

이 컴포넌트는 Discourse 포럼에 다크/라이트 모드 토글 아이콘을 허용합니다. 또한 시스템 OS를 현재 색상 스킴과 다른 모드로 변경하면 자동으로 전환됩니다.

새로운 Discourse 사이드바에 토글을 표시하거나 다른 아이콘과 함께 헤더에 표시하도록 선택할 수 있습니다.

사이드바

헤더

중요한 단계

이것이 올바르게 작동하려면 /admin/customize/colors 영역에서 최소 2개의 색상 스킴 옵션이 활성화되어 있어야 합니다. 최소 두 가지 색상에 color scheme can be selected by users(사용자가 색상 스킴을 선택할 수 있음)가 활성화되어 있어야 합니다.

다크 모드를 위한 기본 색상 스킴이 설정되어야 합니다: /admin/site_settings/category/basic?filter=dark

이 작업이 완료되면 사용자는 사용자 설정 인터페이스 메뉴에서 light(라이트) 및 dark(다크) 설정으로 두 가지 색상 스킴 중 하나를 선택할 수 있어야 합니다.

설정

이름	설명
svg icons
add color scheme toggle to header	사이트 헤더에 색상 스킴 토글 버튼 추가

번역	기본값
toggle_button_title	색상 스킴 전환

우리가 호스팅하고 있나요? 테마 컴포넌트는 Standard, Business, Enterprise 플랜에서 사용할 수 있습니다.

[chrisbagsrocks]

이 기능이 사용자의 설정에 들어가서 활성화하는 방식으로만 작동하나요? 사용자별로 설정하는 것보다 사이트 전체에 적용할 수 있으면 훨씬 나을 것 같습니다.

[jordan.vidrine]

관리자가 사이트 전체에 대해 이 구성 요소를 활성화합니다.

이후, 해당 구성 요소를 설정한 관리자가 어떻게 설정했는지에 따라 토글은 사용자 햄버거 메뉴에 표시되거나 포럼 헤더에 표시됩니다. 관리자가 활성화한 후에는 모든 사용자가 이를 사용할 수 있습니다.

[chrisbagsrocks]

죄송합니다. 제 질문이 명확하지 않았던 것 같습니다. 설치 튜토리얼을 살펴본 결과, 관리자 측에서 햄버거 메뉴 또는 헤더에서 활성화한 후에도 각 개별 사용자가 자신의 설정으로 가서 라이트/다크 컬러 스킴을 활성화하거나 추가해야 하는 것으로 보입니다. 그렇지 않으면 새 사용자나 로그인하지 않은 사용자에게는 작동하지 않습니다. 따라서 제 질문은 다음과 같습니다:
사용자별로 설정하는 것이 아니라 사이트 전체에 컬러 스킴을 적용할 수 있나요?
참고로 사진은 아래에 첨부했습니다.

[jordan.vidrine]

관리자가 이를 활성화하면 라이트 스킴과 다크 스킴이 자동으로 할당될 것이라고 생각합니다. 이후 사용자는 개인 설정으로 사용할 다크 및 라이트 컬러 스킴을 수정할 수 있습니다.

여기에도 선택 항목을 추가해야 할 수 있습니다: /admin/site_settings/category/basic?filter=dark

이 추가 사항을 반영하여 설명을 업데이트했습니다. 혼동을 드려 죄송합니다!

[bekircem]

기본 색상이 다크 모드일 때 올바르게 작동하지 않는 것 같습니다. 어떻게 수정해야 할까요?

기본 색상이 다크 모드인 경우, 사용자가 인터페이스 설정에서 라이트 모드를 선택하지 않으면 토글이 작동하지 않습니다.

[jordan.vidrine]

음, 브라우저와 시스템 설정을 기준으로 prefers-dark 사용자 스킴 설정을 확인하고 있기 때문에 이런 일이 발생하는 것 같습니다.

인스펙터 콘솔을 확인해 보시고, 토글을 사용할 때 아무것도 표시되지 않는지 확인해 주시겠어요?

제가 이 문제를 좀 더 살펴봐야 할 것 같습니다.

[poyrazdursuncan (Dursun Can)]

domain.com/logs 경로에서 경고 발생

Dark-Light Toggle theme/component에서 오류 발생

initialize@https://develcoder.com/theme-javascripts/1d5669cf8344e0837406cef0be37bb086b5968f5.js?__ws=develcoder.com:153:73

initialize@https://develcoder.com/assets/application-01686ed6ee22a989833acbbce970ba63.js:1:11855

https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:268273

each@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:429458

walk@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:428478

each@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:427828

topsort@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:427874

_runInitializer@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:268501

runInstanceInitializers@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:268222

_bootSync@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:252462

didBecomeReady@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:257791

invoke@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:418024

flush@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:417018

flush@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:418946

_end@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:424401

end@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:421081

_run@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:424937

u@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:26:26509


https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:26:26807

[Mr.X_Mr.X]

저도 마찬가지입니다. Dark light 컴포넌트가 오류를 발생시키고 있습니다.

[jordan.vidrine]

@poyrazdursuncan

Dark-Light Toggle 테마/컴포넌트가 에러를 발생시키고 있습니다

@Mr.X_Mr.X

저도 마찬가지입니다. 다크 라이트 컴포넌트가 에러를 발생시키고 있습니다.

음… 해당 에러가 어디서 발생하는지 확실하지 않습니다. 제가 보낸 코드에는 에러를 발생시킬 만한 부분이 없거든요. 에러 관련 통신이 있는 곳은 여기뿐입니다:

Visual Studio Code for the Web

가능하다면 여기서 사이트 링크를 공유해 주시겠어요? 인스턴스가 최신 상태인가요?

[Arta_S (Arta)]

안녕하세요,

문제가 하나 있습니다. 테마를 추가한 후 햄버거 메뉴에 토글 아이콘이 추가되지 않습니다. 심지어 기본 코드에도 존재하지 않습니다. 또한 여기 데모에서 버튼이 작동하지 않습니다. 즉, 라이트와 다크 테마를 전환하지 않습니다.

같은 문제를 겪고 계신 분 계신가요?

[jordan.vidrine]

개발자 도구 콘솔을 확인해서 이와 관련된 내용이 표시되는지 봐주실 수 있을까요? 데모 사이트에서는 아이콘이 정상적으로 작동하는 것으로 보입니다.

[Arta_S (Arta)]

여기에 영상이 있습니다:

제 주요 문제는 제 포럼에서는 햄버거 메뉴에 이러한 옵션을 전혀 볼 수 없다는 것입니다:

[jordan.vidrine]

화면 공유에서 console 탭이 열려 있지 않아서 오류가 발생하는지 확인하기가 어렵습니다.

이 주제에 대한 원본 게시물의 각 단계를 제대로 따랐는지 확인해 보셨나요?

/admin/customize/colors 영역에서 최소 2개의 색상 스킴이 활성화되어 있어야 합니다.
다크 테마가 /admin/site_settings/category/basic?filter=dark에서 활성화되어 있어야 합니다.

그리고 사용자로서 사용자 설정에서 밝은 테마용과 어두운 테마용 색상 스킴을 각각 하나씩 선택해 두셨나요?

[Arta_S (Arta)]

@jordan.vidrine

이 주제에 대한 원본 게시물의 각 단계를 올바르게 따랐는지 확인해 보셨나요?

안녕하세요,

네, 올바르게 수행했습니다. 오늘 모든 것이 정상적으로 표시됩니다. 이는 쿠키 때문이었습니다. 다른 브라우저(포럼을 방문해 본 적이 없는)에서도 누락된 것으로 표시된 것이 다소 이상했습니다. 이제 모든 것이 정상입니다. 도움을 주셔서 감사합니다. 혼동을 드려 죄송합니다.

다만, 게스트를 포함한 모든 사용자는 헤더에서 토글을 볼 수 있습니다. 하지만 관리자로서 로그인 상태에서는 토글을 볼 수 없습니다. 이는 의도된 기능인가요? 서버 캐시 문제일 수도 있나요?

[jordan.vidrine]

음, 흥미롭네요. 사용자 설정에서 어두운 테마와 밝은 테마 중 하나를 선택해 두셨나요?

그리고 해당 컴포넌트가 설치된 테마를 사용하고 계신가요?

[Arta_S (Arta)]

프로필에 들어가서 이 옵션(자동 다크 모드 색상 스킴 활성화)을 활성화해야 했습니다. 그래야 헤더에 표시되거든요. 아마 이것저것 만지다가 그 체크박스를 놓친 것 같습니다.

[agungor]

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

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

위와 같은 상황에서 설정 > 인터페이스 > 테마를 통해 라이트 테마로 전환을 시도하면 아무 반응이 없는데, 저로서는 괜찮습니다. 제 시스템 설정이 이미 다크 모드로 되어 있으므로 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의 “자동 다크 모드 색상 스키마 활성화” 옵션이 해제되어 있으면 사이트 로고는 라이트/다크 모드 간에 정상적으로 전환됩니다. 하지만 이렇게 하면 다크/라이트 모드 토글이 표시되지 않습니다

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

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

[MattiaB (Mattia)]

@agungor

다크/라이트 모드 토글 컴포넌트에 대해 동일한 작업을 수행했을 때, Discourse의 테마 설정이 라이트로 되어 있으면 토글을 통해 실제로 라이트 모드로 전환할 수 있습니다(개인적으로는 이게 더 좋습니다). 하지만 헤더의 사이트 로고는 여전히 다크 모드 상태 그대로라 라이트 모드에서는 잘 보이지 않습니다.

저도 같은 현상이 발생합니다! 해결책을 찾으신 분 계신가요?

저는 프론트엔드 개발자는 아니지만 디버깅을 좀 해보았습니다:
제 컴퓨터가 설정되어 있는 다크 모드일 때, 로고의 HTML은 다음과 같습니다:

로고는 정상적으로 표시되며 다크 모드가 완벽하게 작동합니다. 라이트 모드로 전환하면 테마는 라이트로 바뀌지만 로고는 사라집니다(다크 로고가 그대로 남아있는 상태).

이때 HTML은 다음과 같은 모습입니다:

<source srcset="https://radixtalk.com/uploads/default/original/1X/19838ecb731d3f87d9db76c927e793ab2e159f1e.png" media="(prefers-color-scheme: dark)">라는 추가적인 줄이 있으며, 이 줄이 올바른 로고의 로딩을 "차단"하고 있습니다. 이 줄을 Inspect Element를 통해 제거하고 <img src="https://radixtalk.com/uploads/default/original/1X/237090c67d33a1a38f9f031336dab420c4c4a37d.png" alt="RadixTalk" id="site-logo" class="logo-small" width="36">만 남기면 올바른 로고가 표시됩니다.

이 정보가 도움이 되길 바랍니다.

[agungor]

@MattiaB

저도 마찬가지예요! 해결책을 찾았나요?

아니요, 찾지 못했어요. 결국 헤더 배경색을 바꾸는 방식으로 변경해서 라이트 모드와 다크 모드 간 로고 전환이 더 이상 중요하지 않게 되었어요