ti0
4월 16, 2023, 2:45오전
1
플러그인 또는 테마 컴포넌트에서 현재 테마가 다크 모드를 사용 중인지 감지하는 방법이 있나요?
Don
4월 16, 2023, 10:39오전
2
안녕하세요,
이를 달성하는 몇 가지 방법이 있습니다.
다음 링크를 사용할 수 있습니다.
Would this accomplish what you need? this would need to be added to color_definitions.scss
@if #{schemeType()} == dark {
body {
background: red;
}
} @else {
body {
background: blue;
}
}
A class does seem like it would be useful though, we can probably add one.
또는 이 링크도 있습니다.
I believe, due to the way the SCSS is compiled, custom dark/light definitions need to be added to color_definitions.scss within a theme and won’t work in other scss files.
[Screen Shot 2020-12-04 at 9.54.13 PM]
color_definitions.scss is high up in the cascade (before a lot of the default styles), so you don’t want to add the .modal.history-modal ins part there. Instead you can just add the color definition itself…
$dark-theme-ins: #acf2bd;
$light-theme-ins: #4da06d;
$ins: dark-light-choose(…
Discourse Ai의 관련 주제 섹션을 정말 좋아합니다.
Lilly
4월 16, 2023, 12:02오후
3
개인적으로는 하나의 테마에 다크/라이트 모드를 적용하는 것보다, 다크 테마와 라이트 테마를 완전히 분리해서 사용하는 방식을 선호합니다. 일부 사용자는 그 추가 드롭다운 메뉴가 혼란스럽다고 느끼는 것 같습니다. 저는 라이트 버전과 다크 버전의 테마를 각각 만들어 햄버거 메뉴에 배치하고 있지만, 현재 활성화된 테마는 4개뿐입니다. (다만, 특별한 이벤트를 위해 한시적으로 사용하는 테마도 만들었습니다. 예를 들어 마스터스 골프 토너먼트 기간에는 라이트와 다크 버전의 테마를 따로 제작했죠.) 다만 색상 팔레트를 계속 관리해 두어야 한다는 점은 있습니다.
ti0
4월 16, 2023, 12:24오후
4
테마별로 색상 단위로 Head 섹션에 한 줄의 코드를 추가하여 이 문제를 해결했습니다:
document.body.classList.add(“dark-theme”);
document.body.classList.add(“light-theme”);
@Don @Lilly , 의견을 주셔서 감사합니다.
주제를 정리하고 찾는 것이 훨씬 쉬워졌어요.