다크 모드 선택기 배경색

[abe]

아이콘은 자체 호스팅 시에만 변경할 수 있나요? 아이콘에 배경색이 있어 제 배경색과 어울리지 않습니다. SVG 배경을 제거하면 훨씬 더 좋아 보일 것 같습니다.

[tobiaseigen]

SVG 아이콘은 사용자의 색상 팔레트를 준수해야 합니다. 사이트에 대한 컴포넌트 접근 권한이 있는 경우, 테마 컴포넌트에서 아이콘 자체를 변경할 수 있습니다. 문제점에 대해 스크린샷과 함께 더 자세한 내용을 공유해 주시겠어요? 또한 설정에서 라이트 모드와 다크 모드가 올바르게 구성되어 있는지 확인해 주실 수 있나요?

[abe]

감사합니다. 이렇게 보입니다:

이것이 버튼의 상태와 관련이 있다는 것을 깨달았습니다. 페이지 배경의 아무 곳이나 클릭하면 보기 좋게 변합니다. 회색 사각형이 사라지고 달의 색상이 확대경과 동일해집니다. 테마에서 색상을 변경해 보았지만 이 색상을 제어하는 옵션을 찾을 수 없었습니다.

확인하실 수 있도록 일단 이 상태로 두겠습니다:

OPENRNDR

또한 아이콘을 circle-half-stroke으로 변경하고 싶지만 시도가 성공적이지 못했습니다.

[tobiaseigen]

말씀하신 내용을 이해했습니다. 이를 시연하기 위해 짧은 스크린캐스트를 만들었습니다.

사이드바에 선택자가 있는 경우에도 제 사이트(그리고 여기 메타에서도) 동일한 현상이 발생합니다. 색상이 더 가깝고, 버튼이 당신의 경우처럼 헤더에서 두드러지지 않아서 훨씬 덜 보기 싫어 보입니다.

이 문제를 방지하기 위한 디자인 수정은 비교적 사소한 것일 것이며, 좋은 아이디어라고 동의합니다.

[Moin]

@abe

그리고 아이콘을 circle-half-stroke로 변경하고 싶은데, 제 시도는 성공하지 못했습니다.

현재 아이콘을 편집할 수 있는 설정은 없는 것 같습니다. 사용된 아이콘이 로드되도록 보장하는 설정은 있지만, 컴포넌트를 포크하거나 사용자 정의 설정을 추가하지 않는 한 아이콘을 커스터마이징할 수 없습니다.

javascripts/discourse/components/color-scheme-toggler.gjs

[tobiaseigen]

흥미롭네요. svg icons 설정이 정확히 무엇을 하는지 궁금합니다. 사이드바에서 사용되는 svg 아이콘, 예를 들어 circle이나 circle-half-stroke 등으로 변경해 보았지만, 그렇게 하니 태양 아이콘만 표시되지 않았습니다. 달 아이콘은 계속 표시됩니다.

[Moin]

이 설정은 아이콘을 추가하는 데 사용됩니다. 관리자가 아이콘을 선택할 수 있는 컴포넌트, 예를 들어 사용자 정의 헤더 아이콘과 같은 경우에서 유용합니다. 이러한 경우 이 설정을 사용하여 사용하려는 아이콘을 추가하면 아이콘이 로드됩니다.
아이콘을 사용자 정의할 수 없는 경우에는 about.json 파일에도 추가할 수 있다고 생각합니다. 하지만 아직 테마 작동 방식에 대해 배우는 중입니다.

[Lilly (Lillian)]

포럼의 태양과 달 아이콘을 이-양(yin-yang)으로 쉽게 교체했습니다. 구성 요소의 head 태그나 CSS 편집에 아래 코드를 넣으면 됩니다. (로봇 아이콘도 번개 모양으로 함께 교체했습니다.)

<script type="text/discourse-plugin" version="0.8"> 
  
  api.replaceIcon('robot', 'bolt');
  api.replaceIcon('sun', 'yin-yang');
  api.replaceIcon('moon', 'yin-yang');

</script>

이렇게 하는 것이 더 쉬운 것 같았습니다.