다크/라이트 모드 전환

커스터마이징 테마 컴포넌트
,
141

음, 이게 왜 안 되는지 모르겠네요. :cry: 죄송합니다

2개의 좋아요
142

안녕하세요, 번역 병합을 요청드립니다: Add Arabic translation - Pull Request #37 - discourse/discourse-color-scheme-toggle - GitHub

제작해 주셔서 감사합니다 :heart:

4개의 좋아요
143

안녕하세요. PC에서 크로미움 기반 브라우저(구글 크롬이 아닌)를 사용 중인데, 페이지를 새로고침하면 다크 모드가 유지되지 않는 이유가 있을까요? 또한 다크 모드 버튼을 클릭해도 아무 반응이 없는 경우가 많습니다.
모든 설정은 올바르게 되어 있는데, 왜 이렇게 유지되지 않거나 토글이 안 되는지 모르겠습니다.

1개의 좋아요
144

모종의 이유로 제 인스턴스에서는 버튼이 왼쪽 하단 모서리에 표시되지 않습니다:

image

메타(Meta)와의 비교:
image

기본 테마에서 이 컴포넌트만 활성화하고 다른 사용자 정의 CSS 없이 시도해 봤는데, 제가 놓치고 있는 부분이 있을까요?

모든 플러그인을 비활성화하고 기본 테마 + 이 컴포넌트만 사용하는 안전 모드에서도 토글 버튼의 위치가 동일하지 않습니다.

1개의 좋아요
145

다른 주제 하나 더 말씀드리면, Meta에서도 이 문제가 발생하고 있는 것을 확인했습니다. 제 인스턴스에서도 꽤 오래전부터 이 문제를 눈치챘지만, 제 환경만의 문제인 줄 알았거든요.

이 문제는 스킴을 수동으로 변경했을 때, 시스템 스킴과 일치하지 않는 경우(제가 볼 때)에 발생합니다. 새로고침하면 해결되지만, 버튼으로 수동 변경한 모드를 무시하고 로고가 무작위로 “시스템” 색상으로 되돌아갈 때가 있습니다.

image
image1152×300 23.8 KB

2개의 좋아요
146

크롬의 다크 모드에서 버그인 것 같습니다?
(위에서 논의된 내용을 확인했습니다)

재현 방법:

  • discourse 3.2.1
    개인 설정 > 색상 스킴: regular는 라이트 테마, dark mode: regular와 동일

  • 크롬은 시스템 테마를 사용합니다(시스템이 저녁에 자동으로 다크로 전환됨)
    저녁에 시스템이 다크 모드로 전환되면 크롬도 다크 모드가 됩니다.

위와 같은 경우, 저녁에는 전환 버튼이 작동하지 않습니다.
반면, 낮에는 정상적으로 작동합니다.
위에서 preference가 dark mode를 "same as regular"로 설정했기 때문이라는 논의는 확인했습니다.
하지만 왜 낮에는 다크 모드로 전환이 가능한 것일까요?

1개의 좋아요
147

토글 후 다른 보드로 진입할 때, 사이트 로고가 토글된 모드에 맞게 일시적으로 변경되지 않습니다

1개의 좋아요
148

안녕하세요 @eveyone, 토글을 추가하는 방법에 대해 도움을 주실 분 계신가요?
이 가이드를 참고하고 있는데, 제 테마에 이미 설치되어 있는 토글이 어디에도 보이지 않습니다. 헤더에도, 푸터에도 나타나지 않아요?

image
image1024×713 62.3 KB

1개의 좋아요
149

첫 번째 게시물의 지시를 따랐나요? 사용자가 선택할 수 있는 2가지 색상 테마가 있으며, 기본 어두운 색상 테마를 설정했나요?

3개의 좋아요
151

수 시간 동안 디버깅을 한 끝에 드디어 이 문제를 해결했습니다. Sidebar Theme Toggle을 삭제하고 다시 설치하니 해결되었습니다!

2개의 좋아요
152

어딘가에 있는 누군가에게 도움이 될 수도 있을 것 같습니다. 모든 사용자들이 인터페이스 설정을 직접 건드리지 않아도 되도록, 라이트 모드를 기본값으로 설정하면 토글이 아무 반응을 보이지 않는 문제(비로그인 사용자의 경우에도)를 실제로 해결할 수 있습니다.

image
image636×400 21.8 KB

2개의 좋아요
153

게시물 4개가 새로운 주제로 분리되었습니다: Wrong logo appears in some cases when toggling dark/light mode

155

게시물이 새 주제로 분리되었습니다: 브랜드 로고와 자동 다크 모드 스킴 문제

156

2개의 게시물이 새 주제 다크 모드 선택기 배경색으로 분리되었습니다.

157

기본 스킴을 다크 모드로 설정하면 이 컴포넌트가 작동하지 않는다고 확신합니다.

다크 모드를 기본으로 유지하면서 사용자가 원할 때 라이트 모드로 전환할 수 있도록 하려면 어떤 조치를 취할 수 있을까요?

1개의 좋아요
158

기본값을 라이트로, 다크를 다크로 설정한 뒤, 사용자가 기기에 설정한 테마를 따르는 것이 맞지 않나요? 사용자가 라이트 모드를 쓰고 있다면 라이트를 기대할 것이고, 반대로 다크 모드를 쓰고 있다면 다크를 기대할 것입니다. 물론, 사용자의 선택을 존중하는 것이 항상 좋은 정책입니다 :smirking_face:

2개의 좋아요
159

하지만 제 기본 템플릿은 다크 모드여야 합니다. 제 색상은 어둡고, 어둡게 유지되어야 합니다. "사용자를 존중"한다는 이유로 이를 변경하지 않을 것입니다. 제 템플릿은 제가 상상하는 스타일대로이며, 라이트 모드를 추가 옵션으로만 제공하고자 합니다.

이것이 불가능하다면 괜찮습니다 :smiley:

160

결국 본인이 원하는 대로 사용자 설정을 깨뜨리려는 건가요? 라이트 팔레트도 있는데 그 이유를 잘 이해하지 못하겠습니다. 만약 테마에서 라이트 팔레트를 사용할 수 없다면, 그건 디자인의 문제이지 Discourse가 라이트/다크 모드를 처리하는 방식의 문제가 아닙니다. 또한 사용자가 본인보다 취향이 다를 수 있다는 점도 고려해야 합니다.

아니면 제가 오해한 건가요? :thinking:

Discourse에서는 꽤 많은 것을 할 수 있습니다. 하지만 특정 기기에서 사용자 설정을 덮어쓰면서도, 관리자나 디자이너가 원하는 대로 덮어쓸 수 있는 옵션은 남겨둔 채로, 그걸 기본 설정(out of the box)으로 제공한다는 것은 꽤 무리한 일이라고 생각합니다.

더 잘 아는 분이 답변을 주실 거라고 확신합니다.

제 핵심은 그러지 말라는 겁니다. 그것은 그저 나쁜 디자인이자 나쁜 사용자 경험(UX)입니다.

2개의 좋아요
161

정말이죠!

제 궁금한 건 제 템플릿/스타일이 다크 모드인데, 라이트 모드로 전환하는 방법이 있는지였습니다.

하지만 이 부분은 신경 쓰지 마세요. 다른 방법을 시도해 볼게요.

1개의 좋아요
162

CSS에 추가하면 테마의 배경 이미지를 변경할 수 있습니다.

image
image616×434 18.8 KB

다크 모드에서 다른 이미지를 사용하려면 사용할 수 있는 CSS 선택자가 있을까요?
아래와 같이 시도해 보았습니다.

body .dark {
    background-image: url('https://www.myracedata.com/images/sebring.jpg');
    background-repeat: repeat-y;
    background-size: 100%;
}

해당 컴포넌트의 git 저장소를 살펴봤습니다.
여기 처음 오다 보니 죄송합니다.
앤디