다크 모드 설명, 선택 방법 및 전환 활성화 방법

소개

이 가이드에서는 다크 모드, 선택 방법 및 활성화 방법에 대해 다룹니다.

다크 모드란?

Forbes의 설명에 따르면,

다크 모드의 핵심 아이디어는 가독성에 필요한 최소 색상 대비 비율을 유지하면서 기기 화면에서 방출되는 빛을 줄이는 것입니다.

다크 모드는 기본적으로 기기에 적용되는 어두운 테마(보통 검은색 또는 회색)로, 대비를 위해 밝은 색의 텍스트가 사용됩니다. Discourse에는 밝은 색과 어두운 색 스키마를 모두 지원하는 많은 테마가 있습니다.

다크 모드를 어떻게 선택하나요?

Discourse 포럼에서 관리자가 먼저 설치해야 합니다. admin/customize/themes에서 관리자는 인기 테마 목록에서 'Dark’를 선택할 수 있습니다.
그 후, my/preferences/interface로 이동하여 테마를 변경해야 합니다. 이 페이지가 표시되어야 합니다.
(모바일)

이후 현재 테마가 표시되는 드롭다운 메뉴, 또는 ‘Theme’ 드롭다운 아래에서 선택하세요. 제 경우에는 Meta Branded입니다.
그 다음, 드롭다운에서 Dark 또는 어두운 색 스키마를 가진 테마(조금 후에 방법을 알아보겠습니다)를 선택하세요.
원하는 테마를 선택한 후, Regular 드롭다운을 클릭하세요. 'Dark’라는 단어가 포함된 색 스키마를 선택하세요. 일반적인 것에는 ‘Dark’, ‘WCAG Dark’, 'Solarized Dark’가 있습니다.

:warning: 이 가이드를 따를 때 라이트 모드의 색 스키마를 선택하면 좋은 결과를 얻지 못할 수 있습니다. 이 가이드에서는 사용할 것이므로 'Dark’를 선택하는 것이 좋습니다.

이 모든 작업을 마친 후, 페이지 하단의 Save Changes 버튼을 클릭할 수 있습니다. 그러면 Discourse가 다크 모드(또는 더 정확히 말하면 어두운 색 스키마)로 전환됩니다.

다크 모드 드롭다운은 무엇에 사용되나요?

아마도 이것이 궁금하실 것입니다.
간단히 말해, 거기에 설정한 색 스키마는 기기가 다크 모드일 때 활성화됩니다. 기기가 다크 모드일 때, ‘Regular’ 드롭다운에서 선택한 색 스키마를 선택된 색 스키마가 덮어씁니다.
일반적으로 이 설정을 변경하지 않습니다. 그러나 'Regular’에서 색 스키마를 선택했고, 색 스키마를 변경할 때마다 계속 전환하지 않고 'Dark mode’에서도 동일한 설정을 유지하기를 원한다면, ‘Dark mode’ 드롭다운을 'Same as regular’로 설정할 수 있습니다. 그러면 Discourse가 'Regular’에서 선택한 스키마를 따릅니다.
기기가 라이트 모드인 경우, ‘Dark mode’ 드롭다운은 어떤 효과도 미치지 않습니다.

그러면… 테마에 어두운 색 스키마가 있는지 어떻게 확인하나요?

아, 네! 기본적으로 테마를 선택하고 지원되는 색 스키마를 살펴본 후, 어두운 색 스키마가 있는지 확인하면 됩니다. 좋은 기준은 'WCAG Dark’를 찾는 것입니다. 이는 접근성 가이드라인을 따르는 색 스키마이기 때문입니다.

다크/라이트 토글

이제 이 컴포넌트가 코어에 병합되었으므로 설치할 필요가 없습니다.

토글에 대한 더 많은 정보는 이 토픽을 참조하세요:

결론

이것으로 끝입니다! 다크 모드로 테마를 변경할 영역을 찾고, 다양한 색 스키마를 실험해 보았습니다!


출처 및 인용

Forbes: https://www.forbes.com/uk/advisor/mobile-phones/what-is-dark-mode-and-should-you-be-using-it/
관리자를 위한 다크 모드 추가: Looking for default dark theme - #2 by JammyDodger

이 가이드의 모든 정보는 이미지 캡션을 제외하고 AI가 생성한 것이 아닙니다. 모든 다른 정보는 원본이며, 원본이 아닌 경우 위와 같이 링크가 제공됩니다.

6개의 좋아요

It may just be me, however the image doesn’t appear to load on my end:

4개의 좋아요

I re-uploaded it. Try again?

5개의 좋아요

Works now! :grinning_face_with_smiling_eyes:

4개의 좋아요

I have updated the post with the recent component’s merge into core.

4개의 좋아요