pfaffman
2월 20, 2025, 3:56오후
1
No specific class for dark mode 에서 이어지는 논의입니다:
Kris:
이렇게 하면 필요한 결과를 얻을 수 있을까요? color_definitions.scss 파일에 추가해야 합니다.
@if #{schemeType()} == dark {
body {
background: red;
}
} @else {
body {
background: blue;
}
}
```\n
클래스가 유용할 것 같긴 해서, 하나 추가할 수 있을 것 같습니다.
사용자가 어떤 카테고리에 있는지 기준으로 사이트 로고를 변경하고, 사이드바의 카테고리에 로고를 추가하는 테마 컴포넌트를 가지고 있습니다. 이제 다크 모드에서는 다른 로고를 사용하라고 요청을 받았습니다.
아래와 같은 것 말이죠:
.category-my-other-identity #site-logo {
content: url($AS) !important;
display: inline-block;
height: $site-logo-height;
font-size: 0;
margin-top: $site-margin-top;
margin-bottom: $site-margin-bottom;
}
CSS는 잘 못하지만, "이것은-다크-모드입니다"라는 클래스가 있다면 훨씬 쉬울 것 같습니다. 아니면 위와 같은 방식으로 작동할 수도 있겠네요.
아니면 이것이 설정이 있는 “진짜” 테마 컴포넌트라면(지금은 위와 같이 수동으로 코딩되어 있음), 그 설정을 CSS에 넣는 것이 충분히 쉬울 것입니다. 아마도 이것이 제가 해야 할 일인 것 같죠, 그렇죠?
david
2월 20, 2025, 5:31오후
2
우연히도, 이번 주에 우리 팀 내에서 이 주제에 대해 논의하고 있었습니다! 개념 검증용 PR 두 개가 여기에 있습니다:
이것들은 우리의 사고를 돕기 위한 실험일 뿐이며, 어떤 것도 병합될 것이라는 보장은 없습니다.
‘지금 당장’ 최선의 방법은 아마도 <LightDarkImg 컴포넌트를 다음과 같이 사용하는 것입니다:
https://github.com/discourse/discourse/blob/a26138b501f19b98f132f749fb5fca11ae04c016/app/assets/javascripts/discourse/app/components/category-logo.gjs#L3C1-L10C13
Cricket
2월 20, 2025, 5:36오후
3
이해가 됩니다. 저도 한 번 같은 문제를 겪었는데요, @david님 , 제 경우에는 그 방법이 효과적이었을 것 같아요.
📚 The Professor of Pyrrhia:
또한, 배지 부여에 문제가 생기는 경우를 버그로 봐야 할까요, 아니면 다른 문제로 봐야 할까요?
버그일 수도 있지만, 어느 쪽인지 확실히 알기 위해서는 더 자세한 정보가 필요합니다. 또한 이 주제와도 무관하므로, 해당 문제를 검색해 보시는 것이 가장 좋습니다. 답을 찾지 못하면 어떤 시도를 하고 있는지, 어디서 실패하는지 과정을 설명하며 새 주제를 시작해 보시기 바랍니다.
Alteras
2월 20, 2025, 6:46오후
5
순수 CSS 솔루션은 아마도 --scheme-type CSS 변수, 혹은 몇 시간 전에 추가된 color-scheme 속성(와우!)을 @container 스타일 쿼리light-dark()
https://github.com/discourse/discourse/blob/834ea70b1ce3f06e6e03d25ebee0567596ad26c2/app/assets/stylesheets/color_definitions.scss#L5-L7
불행히도 light-dark()는 색상 값에만 작동합니다. color-scheme 속성을 대상으로 하는 @container 스타일 쿼리를 사용할 수 있을 것입니다(파이어폭스는 아직 사용자 정의 속성에 대한 스타일 쿼리를 지원하지 않습니다). 현재 개발 환경이 다운되어 있어 이 아이디어를 테스트해 볼 수 없었습니다.
루트 요소에 전용 .dark-mode 또는 .light-mode 클래스를 사용하는 것이 작업하기에 확실히 가장 쉬울 것입니다.