다크/라이트 모드 전환

존경하는 Discourse 팀과 포럼 참여자 여러분께 :raising_hand_man:

최근에 개인 메시지 편집기를 여는 빠른 링크가 안드로이드 운영체제가 설치된 스마트폰에서 다크/라이트 모드 토글 테마 컴포넌트와 호환되지 않는다는 것을 발견했습니다. 구체적으로 말하자면, 링크를 클릭하면 메시지 작성기가 몇 분의 1초 만에 열렸다가 다시 초안으로 접혀버립니다. 모든 테마 컴포넌트와 플러그인을 확인해 본 결과, 이 작성기 동작은 안드로이드에서 다크/라이트 모드 토글 컴포넌트가 활성화되어 있을 때만 발생하는 것을 확인했습니다. 다음은 관련 영상입니다:

영상에서는 두 가지 시나리오를 보여드렸습니다.

  1. 링크를 처음 클릭하면 작성기가 빠르게 열렸다가 동시에 접혀버립니다.
  2. 링크를 다시 클릭하면 저장된 초안에서 작성기가 열리고, 이전 초안을 삭제한 후 작성기가 정상 모드로 열립니다.
4개의 좋아요

안녕하세요, 관리자가 이 기능을 사이트 전체에 적용하는 방법에 대해 도와줄 수 있나요? 감사합니다

2개의 좋아요

이 문제를 보고해 주셔서 감사합니다. 꽤 기이하고 흥미로운 버그네요!

3개의 좋아요

이 컴포넌트를 제공해 주셔서 정말 감사합니다 :pray: :slightly_smiling_face:
방금 설치했는데 데스크톱과 안드로이드에서 꽤 잘 작동합니다.

4개의 좋아요

스크린샷을 확인해 주세요:

즉, 토글 설정이 프론트엔드에 토글 설정 옵션을 추가하지 않는다는 말씀이시고, 이 플러그인을 설치해야 한다는 말씀이 맞나요?

'아니요’라면, 위 스크린샷에서 다크-라이트 토글을 활성화했는데 이제 토글 스위치를 어디서 찾을 수 있나요?

감사합니다

맞아요. 이 테마 구성 요소를 테마에 포함하고, 저장 후 페이지를 새로고침하면 다크/라이트 모드 전환 아이콘을 볼 수 있습니다. :slight_smile:

3개의 좋아요

그래서 이미 설치되어 있는 것 같습니다. 방금 설치를 시도했는데 이미 설치되어 있다고 표시되었습니다. 이전 스크린샷에서 확인하실 수 있습니다.

하지만 여전히 토글 옵션이 없습니다:
image

토글할 수 있는 다크 테마가 정의되어 있지 않은 것일 수 있습니다.
해당 사항이 있다면, 위 Dark/Light Mode Toggle 를 참고해 주세요.

2개의 좋아요

별도의 "테마"가 필요한 건가요? 저는 기본 테마를 사용하고 있습니다. 이처럼 다크 모드로 전환할 수 있습니다.

하지만 설정에서 "다크"를 선택할 때만 토글 아이콘이 표시됩니다. 처음 방문하는 사용자들도 왼쪽 아래에 달 아이콘을 볼 수 있기를 원합니다. 가능한가요?

수정: 이 게시물의 마지막 부분에 따라 해결했습니다. 전부 제 탓이었네요!

1개의 좋아요

안녕하세요, 제 디스코urses 포럼에서 다크 테마를 기본값으로 설정하려고 합니다. 하지만 사용자가 원할 경우 라이트 테마로 전환할 수 있는 옵션도 제공하고 싶습니다.

질문은 이렇습니다: 포럼의 색상 스킴이 사용자의 시스템 설정에 따라 자동으로 변경되지 않도록 하는 방법은 무엇인가요? 기본값은 다크 테마로 유지하고, 사용자가 수동으로 선택한 경우에만 라이트 테마로 변경되도록 하고 싶습니다. 이 설정에 대한 조언을 주시면 감사하겠습니다.
감사합니다!

최신 Discourse 업데이트를 통해 이 오류가 해결되기를 바랐지만, 여전히 지속되고 있습니다

3개의 좋아요

모든 설정을 마친 후, 라이트 모드를 켜고 있으면 페이지를 새로고칠 때마다 항상 다크 모드가 표시됩니다. 매번 새로고칠 때마다 이렇게 되는데, 어떻게 막을 수 있을까요? @jordan.vidrine

2개의 좋아요

설정 과정에 포함된 모든 단계를 알려주실 수 있을까요?

운영 체제의 테마가 자동, 다크, 라이트 중 무엇으로 설정되어 있나요?

4개의 좋아요

안녕하세요, 세 번째 토글을 추가할 수 있을까요? 트위터처럼 라이트, 디밍, 다크 모드처럼요.

가능하다면 어떻게 추가해야 할까요?

1개의 좋아요

세 번째 토글은 없습니다. 이 기능을 추가하려면 이 토픽의 OP에 링크된 테마 컴포넌트에 대한 PR이 필요합니다.

3개의 좋아요

Discourse를 3.2.0으로 업그레이드한 후 로그에서 이러한 오류가 발생합니다.

Dark-Light Toggle 테마/컴포넌트가 오류를 발생시키고 있습니다:
TypeError: Cannot read properties of null (reading ‘en’)

백트레이스:

TypeError: Cannot read properties of null (reading 'en')
    at Object.initialize (https://site.com/theme-javascripts/56ff324506efb7c3883ba59ee00cc753852ee8cc.js?__ws=site.com:5:51)
    at n.initialize (https://site.com/assets/chunk.6d10396b901f5b95b67e.d41d8cd9.js:2:309459)
    at https://site.com/assets/vendor.f196a698a6a811ae0583c1ea5284644b-53642a3b547b78e34800ab2eeb101f12b39be8c27ec85e9ad359a095161fad6b.js:11:141483
    at e.each (https://site.com/assets/vendor.f196a698a6a811ae0583c1ea5284644b-53642a3b547b78e34800ab2eeb101f12b39be8c27ec85e9ad359a095161fad6b.js:11:368590)
    at e.walk (https://site.com/assets/vendor.f196a698a6a811ae0583c1ea5284644b-53642a3b547b78e34800ab2eeb101f12b39be8c27ec85e9ad359a095161fad6b.js:11:367606)
    at e.each (https://site.com/assets/vendor.f196a698a6a811ae0583c1ea5284644b-53642a3b547b78e34800ab2eeb101f12b39be8c27ec85e9ad359a095161fad6b.js:11:366959)
    at e.topsort (https://site.com/assets/vendor.f196a698a6a811ae0583c1ea5284644b-53642a3b547b78e34800ab2eeb101f12b39be8c27ec85e9ad359a095161fad6b.js:11:367005)
    at e._runInitializer (https://site.com/assets/vendor.f196a698a6a811ae0583c1ea5284644b-53642a3b547b78e34800ab2eeb101f12b39be8c27ec85e9ad359a095161fad6b.js:11:141795)
    at e.runInitializers (https://site.com/assets/vendor.f196a698a6a811ae0583c1ea5284644b-53642a3b547b78e34800ab2eeb101f12b39be8c27ec85e9ad359a095161fad6b.js:11:141441)
    at e._bootSync (https://site.com/assets/vendor.f196a698a6a811ae0583c1ea5284644b-53642a3b547b78e34800ab2eeb101f12b39be8c27ec85e9ad359a095161fad6b.js:11:110927)
    at e.domReady (https://site.com/assets/vendor.f196a698a6a811ae0583c1ea5284644b-53642a3b547b78e34800ab2eeb101f12b39be8c27ec85e9ad359a095161fad6b.js:11:110503)
    at invoke (https://site.com/assets/vendor.f196a698a6a811ae0583c1ea5284644b-53642a3b547b78e34800ab2eeb101f12b39be8c27ec85e9ad359a095161fad6b.js:11:358129)
    at h.flush (https://site.com/assets/vendor.f196a698a6a811ae0583c1ea5284644b-53642a3b547b78e34800ab2eeb101f12b39be8c27ec85e9ad359a095161fad6b.js:11:357216)
    at p.flush (https://site.com/assets/vendor.f196a698a6a811ae0583c1ea5284644b-53642a3b547b78e34800ab2eeb101f12b39be8c27ec85e9ad359a095161fad6b.js:11:358979)
    at B._end (https://site.com/assets/vendor.f196a698a6a811ae0583c1ea5284644b-53642a3b547b78e34800ab2eeb101f12b39be8c27ec85e9ad359a095161fad6b.js:11:364062)
    at B._boundAutorunEnd (https://site.com/assets/vendor.f196a698a6a811ae0583c1ea5284644b-53642a3b547b78e34800ab2eeb101f12b39be8c27ec85e9ad359a095161fad6b.js:11:360486)
2개의 좋아요

테마 컴포넌트의 이 설정은 무엇으로 되어 있나요? 또한, 테마 컴포넌트가 최신 상태인가요?

2개의 좋아요

최신 상태라고 나와요

2개의 좋아요

이 오류를 재현하는 단계는 무엇인가요? 화면에 무언가 나타납니까? 콘솔에서만 발생하나요?

1개의 좋아요

작동 시 시각적인 문제는 없습니다. 지금까지는 콘솔의 로그만 확인되었습니다.

2개의 좋아요