자동 다크 테마를 선택한 다크 테마와 동일하게 설정하는 방법

다음과 같은 어두운 테마가 있습니다:

사용자 프로필에서 테마를 선택하면 위와 같이, 예상대로 표시됩니다.

그러나 프로필 옵션인 "자동 다크 모드 색상 스킴 활성화"를 통해 자동으로 활성화되면 다음과 같이 보입니다:

UI의 대부분이 어두워지지만, 라이트 테마의 CSS가 적용되어 헤더가 다음과 같은 상태가 됩니다.

자동으로 선택되었을 때 CSS 등을 포함하여 Discourse가 엄격하게 다크 테마를 선택하도록 하는 방법이 있을까요?


참고로, 라이트 테마 옵션은 다음과 같습니다:

그리고 다크 테마 옵션은 다음과 같습니다:

두 가지 다른 색상 팔레트를 사용 중인 것 같습니다. Joplin 기본 테마와 Simple Dark 테마인데요. 이 둘은 다른 건가요?

네, Joplin 기본 색상 테마를 사용하는 기본 테마는 라이트 테마이고, 다른 하나는 다크 테마입니다. 두 가지 다른 색상 테마를 제공하는 것이 정상적인 것 같습니다.

정말 죄송합니다! 관리자 인터페이스에서 다소 혼란을 줄 수 있는 부분인데, 현재 이를 개선하기 위해 노력하고 있습니다. 제가 올바르게 이해하고 있기를 바라지만, 현재 기능을 제 방식으로 설명해 드리겠습니다.

첫 번째 변경 사항은 이제 "색상 팔레트(color palette)"라고만 표현하고 "색상 스킴(color scheme)"이라는 용어를 더 이상 사용하지 않는다는 점입니다. 이는 곧 UI에서도 변경될 예정입니다. 현재로서는 팔레트와 스킴은 동일한 것을 의미합니다.

디스코urs(Discourse)에서 다크 모드 지원을 활용하려면 다음과 같은 설정이 가장 잘 작동했습니다:

  • 활성화된 테마가 하나만 있도록 합니다.
  • 활성화된 테마의 설정에서 라이트 모드 색상 팔레트를 지정합니다.
  • default dark mode color scheme id 사이트 설정에서 다크 모드 색상 팔레트를 지정합니다.
  • 회원들의 운영체제 다크 모드 설정이 존중됩니다.
  • 다크 모드 토글 테마 구성 요소를 사용하여 라이트/다크 모드를 전환할 수 있습니다.
  • 회원들은 사용자 설정에서 라이트 모드와 다크 모드 옵션을 볼 수 있습니다(테마가 하나만 있으므로 테마 선택기는 보이지 않음).

다크 테마를 색상 팔레트 이상으로 커스텀화했으며, 사람들이 다크 색상으로 된 라이트 모드 테마를 사용하는 것을 원하지 않는다면 다크 모드 선택기를 사용할 수 없습니다. 이 경우 다음과 같이 설정해야 합니다:

  • 활성화된 테마가 두 개가 되도록 합니다.
  • 라이트 모드 테마에는 라이트 색상을, 다크 모드 테마에는 다크 색상을 사용합니다.
  • default dark mode color scheme id 설정은 지정하지 않습니다.
  • 회원들의 운영체제 다크 모드 설정은 존중되지 않습니다.
  • 다크 모드 토글 테마 구성 요소가 작동하지 않습니다.
  • 사용자 설정에서 회원들이 선호하는 테마를 선택할 수 있습니다.

마지막으로, 라이트 또는 다크 테마 중 하나만 원한다면 테마 하나와 팔레트 하나만 활성화하고, default dark mode color scheme id 사이트 설정에 팔레트를 지정하지 않으면 됩니다.

답변해 주셔서 감사합니다. 사실 저희는 서로 다른 세 가지 테마를 사용 중이고, 그중 두 개는 CSS로 커스터마이징되어 있습니다(할로윈, 크리스마스 기간에 헤더를 변경하기 위함). 제 이해가 맞다면, 이 설정으로는 자동 다크 테마를 제대로 작동시킬 수 없는 것이 맞나요?

이상적은 아니지만, 아마도 이 정도는 감수할 수 있을 것 같습니다. 아마도 라이트 모드에서 작동하는 헤더가 다크 모드에서도 잘 작동하도록 헤더를 수정해야 할 필요가 있을지 모릅니다.

아니요, 라이트와 다크 색상 팔레트를 제공하지 않는다면 가능합니다. 제공한다면 불가능합니다.

여러 가지 색상 팔레트가 있으며, 주요한 것은 “Joplin Default”(기본 라이트 테마에서 사용)와 “Simple Dark”(기본 다크 테마에서 사용)입니다.

상단 게시물에서 언급한 문제를 해결하기 위해 여기에 설정해야 할 것이 있나요?

포럼 설정에서 라이트와 다크의 기본 색상 팔레트가 무엇인지 설명합니다. 테마 설정에서 기본값을 라이트로 설정합니다. 그리고 스위처를 사용하기 시작합니다. 이것으로 끝입니다.

문제는 사용자가 개인 설정에서 색상 팔레트를 변경할 때 시작됩니다. 그것은… 끔찍한 시스템은 너무 많지만, 이해하기 어려운 시스템입니다. 그리고 제 의견은 색상 설정에 대한 폴백이 여기저기 너무 많다는 것입니다. 팔레트는 테마에서만 설정되어야 합니다. 물론, 이는 사용자가 색상을 선택할 수 있는 옵션을 제한하지만…

헤더를 어떻게 커스터마이징하셨나요? 문제는 헤더 커스터마이징이 선택된 테마에 따라 달라지지만, 다크/라이트 토글은 색상 팔레트만 변경한다는 점입니다. 결과적으로 설정에서 라이트 테마와 다크 팔레트를 조합으로 선택해도 동일한 결과가 나타납니다.

Versatile Banner는 라이트 또는 다크 색상 팔레트가 활성화되어 있느냐에 따라 다른 배경 이미지와 색상을 사용합니다. 헤더에도 이와 유사한 방식을 적용해 볼 수 있습니다.

네, 헤더는 실제로 각 테마의 사용자 지정 CSS를 통해 설정됩니다. 현재 색상 팔레트가 다크 모드인지 라이트 모드인지 식별할 수 있는 방법이 있을까요?

다음과 같이 시도해 보았습니다:

@media (prefers-color-scheme: dark) {
  .d-header {
    background-image: url(https://imgur.com/LdcvIcp.png); /* 다크 배경 이미지 */
  }
}

하지만 다크 색상 팔레트가 활성화되어 있을 때 이 코드는 작동하지 않았습니다. 확실하게 확인하기 위해 @media (prefers-color-scheme: light)으로 같은 코드를 시도해 보았는데, 이쪽은 정상적으로 작동했습니다. 따라서 다크 색상 팔레트가 어딘가에서 라이트 색상 스킴으로 식별되고 있는 것 같습니다. 현재 색상 팔레트가 다크 모드임을 알 수 있는 다른 방법이 있을까요?

HTML을 확인하고 "dark"를 검색해 보았지만 유용한 정보를 찾지 못했습니다. .is-dark-theme와 같은 최상위 선택자가 있어서 현재 테마가 다크 모드임을 알려주면 좋았을 텐데 싶습니다.

다재다능한 배너(versatile banner)가 배경을 변경하는 방식이 제대로 작동합니까? 컴포넌트를 설치하고 다크 모드를 위한 배경 이미지를 추가한 후 미리보기 기능을 사용하여 테스트해 볼 수 있습니다.

그 다음, Update themes and plugins to support automatic dark mode - #5 by pmusaraj 에서 예를 들어 설명된 dark-light-choose를 사용할 수 있으며, 이 방식은 배너에서도 사용됩니다.