현재 단일 테마에 두 가지 팔레트(라이트 하나, 다크 하나)를 사용하고 있습니다. 다크 팔레트에는 90% 정도 만족하고 있지만, 일부 경우 수정이 필요합니다.
예를 들어, 다크 팔레트에서 속삭임(whispers)의 배경색과 전경색 사이의 대비가 충분하지 않습니다:
.whisper .topic-body .cooked {
color: var(--primary-medium)
}
CSS를 오버라이드할 수 있다는 것은 알고 있지만, 이를 var(--primary-light)로 변경하면 라이트 팔레트에도 영향을 미칩니다.
단일 팔레트만 대상으로 지정하는 방법이 있는지, 아니면 각자 고유한 팔레트를 가진 두 개의 서로 다른 테마를 만드는 것이 최선의 관행인지 궁금합니다.
이 두 번째 방식에 대한 제 문제는 색상과 전혀 관련 없는 다른 많은 커스터마이징을 복제해야 한다는 점입니다.
네, 라이트 또는 다크 컬러 팔레트를 사용하는지 확인하는 데 사용할 수 있는 SCSS 함수가 몇 가지 있습니다.
아래와 같이 사용합니다.
@if is-light-color-scheme() {
// 라이트 컬러 팔레트용 CSS
h1 {
color: green;
}
}
@if is-dark-color-scheme() {
// 다크 컬러 팔레트용 CSS
h1 {
color: red;
}
}
그 부분을 지적해 주셔서 감사합니다, @Johani. dark-light-choose($light, $dark) 함수가 제가 원하는 것을 정확히 수행하는 것 같지만, 이제 문제는 팔레트 변경을 감지하지 못한다는 점입니다.
제 유일한 활성 테마는 "Nacho"이며, 두 개의 팔레트가 있습니다: “Clara”(라이트)와 “Oscura”(다크):
다음과 같은 CSS로 이를 커스터마이징했습니다:
$dark-theme-ins: #4da06d;
$light-theme-ins: #acf2bd;
.modal.history-modal {
ins {
background: dark-light-choose($light-theme-ins, $dark-theme-ins);
}
}
라이트 팔레트에서는 정상적으로 작동합니다:
하지만 다크 팔레트에서는 작동하지 않습니다:
CSS를 다음과 같이 변경하면 작동합니다:
.modal.history-modal {
ins {
background: $dark-theme-ins;
}
}
즉, 다크 팔레트로의 변경이 감지되지 않는 것 같습니다. is-light-color-scheme가 $primary와 $secondary의 밝기를 확인하는 것을 알 수 있습니다. 제 다크 팔레트는 다음과 같습니다:
그리고 라이트 팔레트는 다음과 같습니다:
더 이상 아이디어가 없습니다.
이 문제는 여기서 수정되었습니다: Why might dark-light-choose() not work? - #2 by awesomerobot
