여러분 안녕하세요,
지난 몇 시간 동안 Ghost 블로그의 다크 모드와 Discourse 임베딩의 동기화를 시도하고 있었습니다. 호스트 사이트에서 다크 모드 상태를 성공적으로 감지하고 올바른 매개변수를 전달하는 데는 성공했지만, Discourse는 익명 사용자의 경우 이 매개변수를 무시하는 것 같습니다.
우리의 설정 & 검증한 사항:
매개변수 주입: Ghost에서 data-color-scheme=“dark” 속성을 감지하는 커스텀 스크립트를 사용하고 있습니다. 브라우저 콘솔과 네트워크 탭을 통해 ?color_scheme_id=13(우리의 팔레트 13) 또는 ?theme_id=4(전용 다크 테마) 매개변수가 embed.js 요청에 올바르게 추가되고, 이후 Iframe src에도 올바르게 전달되는 것을 확인했습니다.
테마 구성: Discourse에서 대상 테마(ID 4)와 색상 스킴(ID 13)은 모두 "사용자 선택 가능(User Selectable)"으로 표시되어 있습니다. 색상 스킴은 또한 활성 테마의 "기본 다크(Default Dark)"로 설정되어 있습니다.
문제점: Iframe URL에 …/embed/comments?topic_id=…&theme_id=4가 명확히 표시되어 있음에도 불구하고, 익명 방문자의 경우 렌더링된 콘텐츠가 라이트 모드(기본)로 유지됩니다.
실시한 테스트:
theme_id를 스크립트에 직접 하드코딩.
embed.js 로딩이 완료된 후 JavaScript를 통해 Iframe src를 수동으로 조작.
테마 컴포넌트 내에서 @media (prefers-color-scheme: dark)를 사용하여 스타일을 강제 적용해 보았으나, 임베딩 컨텍스트에서도 무시되거나 오버라이드되는 것 같습니다.
질문: Discourse 임베딩 로직에 익명 사용자가 URL 매개변수를 통해 테마나 색상 스킴을 전환하는 것을 방지하는 특정 보안 설정이나 하드코딩된 제한이 있나요?
"스타일 없는 콘텐츠 플래시(Flash of unstyled content)"를 피하고, 다크 블로그 포스트를 읽는 독자들이 흰색 댓글 섹션에 의해 눈이 부시지 않도록 하기를 원합니다. 임베딩 콘텐츠의 이 동작을 제어하는 app.yml 설정이나 숨겨진 사이트 설정이 있을까요?
Discourse 버전: Discourse 3.5.3
도움이 될 만한 통찰을 주시면 감사하겠습니다!