라이트 모드와 다크 모드 색상 팔레트 설정

[Discourse]

이 가이드는 Discourse 사이트 테마에 대해 라이트 모드와 다크 모드 색상 팔레트를 설정하는 방법을 설명합니다. 테마별 설정, 팔레트 할당, 사용자 인터페이스 고려 사항 등을 다룹니다.

필요한 사용자 권한: 관리자

각각의 라이트 모드와 다크 모드 색상 팔레트를 설정하면 브랜드에 맞게 Discourse 커뮤니티를 표현하고, 접근성을 개선하며, 사용자가 자신의 시청 환경을 제어할 수 있도록 할 수 있습니다. 최근 Discourse 테마 시스템의 개선 사항으로 각 테마에 선호하는 라이트 및 다크 팔레트를 할당하고, 사용자가 원하는 외관을 선택할 수 있게 되었습니다.

요약

이 가이드에서는 다음을 다룹니다:

• 라이트 모드와 다크 모드 팔레트 할당 이해
• 테마에 라이트 및 다크 색상 팔레트 할당
• 사이트 색상 팔레트 관리
• 사용자를 위한 색상 모드 선택기 활성화
• 사용자 대상 옵션 이해
• 팔레트 사용 및 접근성에 관한 모범 사례

라이트 모드와 다크 모드 팔레트 할당 이해

Discourse 테마는 “라이트” 및 “다크” 색상 팔레트의 명시적 할당을 지원합니다. 이를 통해 어떤 테마든 사용자의 시스템 설정에 따라 자동으로 전환되거나, 사용자가 선호하는 모드를 선택할 수 있으며, 선호하는 브랜드 색상을 유지할 수 있습니다.

테마에 라이트 및 다크 팔레트 할당

테마의 색상 팔레트를 구성하려면:

1. **관리자 > 외관 > 테마 및 컴포넌트 (/admin/config/customize/themes)**로 이동합니다.

2. 편집하려는 테마를 클릭합니다.

3. 테마 설정에서 Color palettes 섹션을 찾습니다.

4. Color Palette 및 Dark Color Palette 모두에 대해 사용하려는 팔레트를 선택합니다.

   

5. 테마 설정 페이지 하단의 Save(저장)를 클릭합니다.

이렇게 하면 사이트의 테마가 라이트 모드 및 다크 모드 사용자 모두에게 올바른 팔레트를 사용하게 됩니다. 다른 사용자 선택 가능한 팔레트를 회원이 여전히 선택할 수 있지만, 여기에 설정한 팔레트가 기본값이 됩니다.

색상 팔레트 관리

사용 가능한 모든 색상 팔레트(및 연결된 할당)는 중앙에서 관리할 수 있습니다:

1. **관리자 > 외관 > Color palettes (/admin/config/colors)**로 이동합니다.

2. 여기서 팔레트를 편집, 추가 또는 제거하고, 사용자 선택 가능하도록 표시하며, 테마의 기본 라이트 및 다크 팔레트로 할당할 수 있습니다.

   

색상 모드 선택기 활성화

사용자가 사이트에서 라이트 모드와 다크 모드를 전환할 수 있도록 하려면 interface_color_selector 사이트 설정을 활성화해야 합니다. 기본적으로 이 설정은 비활성화되어 있습니다.

활성화하려면:

1. 관리자 > 설정으로 이동하여 interface color selector를 검색합니다.
2. 다음 중 하나로 설정합니다:
   • Display in sidebar footer(사이드바 하단에 표시) — 사이드바 하단에 라이트/다크/자동 토글을 추가합니다
   • Display in header(헤더에 표시) — 사이트 헤더에 토글을 추가합니다

이 설정을 활성화하지 않으면 사용자가 사이트에서 색상 모드 토글을 볼 수 없으며, 사이트는 각 사용자의 시스템 설정을 자동으로 따릅니다.

사용자 대상 옵션

사용자 환경 설정

사용자는 사이트를 보기 위한 선호 모드를 선택할 수 있습니다:

1. User Preferences > Interface(사용자 환경 설정 > 인터페이스)로 이동합니다.

2. “Color palette” 섹션에서 회원은 선호하는 라이트 및 다크 팔레트와 사용하려는 모드(Light, Dark, Auto)를 선택할 수 있습니다:

   

"Auto"가 선택되면 Discourse는 사용자의 시스템 색상 스킴 설정에 맞게 조정됩니다.

---

모범 사례

• 브랜드 일관성: 두 모드 모두에 대해 브랜드와 일치하도록 팔레트를 사용자 지정합니다. 핵심 색상은 일관되게 유지하되 대비와 가독성을 위해 조정합니다.
• 접근성: 색상 대비 비율이 WCAG 지침(이 도구가 도움이 될 수 있습니다)을 충족하는지 확인합니다. 특히 일부 색상이 탁하게 보일 수 있는 다크 모드에서 주의해야 합니다.
• 여러 기기에서 테스트: 모든 기기 및 브라우저에서 두 모드 모두의 외관을 확인합니다.
• 로고 자산: **관리자 > 외관 > Site logo (/admin/config/logo)**에서 라이트 모드와 다크 모드를 위한 별도의 로고를 업로드할 수 있습니다.
• 팔레트 수를 관리 가능하게 유지: 사용자가 필요하거나 합리적이라고 느끼는 팔레트만 제공합니다.

자주 묻는 질문

다크 또는 라이트 팔레트를 하나 이상 가질 수 있나요?
네, 가능합니다. 하지만 혼란을 줄이기 위해 각 모드별로 하나의 주요 팔레트를 유지하는 것이 권장됩니다. 사용자 선택을 위해 테마에 주요 팔레트만 할당하십시오.

모든 사용자가 라이트 모드(또는 다크 모드)만 사용하도록 강제할 수 있나요?
기본 라이트 및 다크 팔레트로 동일한 팔레트를 설정하고, 다른 팔레트가 사용자 선택 가능하지 않도록 하면 됩니다.

사용자 정의 테마 컴포넌트는 자동으로 색상을 조정하나요?
Discourse의 CSS 색상 변수(예: --primary, --secondary)를 사용한다면 팔레트를 상속합니다. 사용자 정의 CSS에서 하드코딩된 색상을 피하는 것이 좋습니다.

팔레트 전환은 테마 전체를 변경하나요, 아니면 색상만 변경하나요?
색상 변수만 변경됩니다. 색상 팔레트를 변경할 때 구조, 글꼴, 레이아웃은 동일하게 유지됩니다.

추가 리소스

• Improved dark and light mode handling 🎨
• A new way to manage colour palettes
• Allow users to select new color palettes
• Making your forum more accessible
• Beginner's guide to using Discourse Themes