dark-light-choose()가 작동하지 않을 수 있는 이유는?

[Nacho_Caballero]

개인화 CSS에서 dark-light-choose($light, $dark) 함수를 사용하려고 하는데, 팔레트를 라이트(Clara)에서 다크(Oscura)로 변경해도 항상 $light 값이 반환됩니다:

제 설정에 대한 자세한 내용은 여기에 공유합니다:

단일 테마 팔레트의 CSS 색상을 변경하는 방법?

Thanks for pointing that out, @Johani. It looks like the dark-light-choose($light, $dark) function does exactly what I want, but my problem now is that it’s not detecting the change of palette. My only active theme is called “Nacho” and it has two palettes: “Clara” (Light) and “Oscura” (Dark): [image] I’ve personalized it with this CSS: $dark-theme-ins: #4da06d; $light-theme-ins: #acf2bd; .modal.history-modal { ins { background: dark-light-choose($light-theme-ins, $dark-theme-in…

지금까지 다음 사항들을 확인해 보았습니다:

• 다크 테마에서 primary 색상의 밝기가 secondary 색상보다 높은지 여부.
• 함수 인자를 올바른 순서로 사용하고 있는지 여부.

이 문제를 디버깅하는 방법을 전혀 모르겠습니다. 제 테마에 문제가 있는 걸까요? 고려해야 할 다른 변수가 있을까요?

[awesomerobot (Kris)]

SCSS가 컴파일되는 방식 때문에, 커스텀 다크/라이트 정의는 테마 내의 color_definitions.scss에 추가해야 하며, 다른 scss 파일에서는 작동하지 않는다고 생각합니다.

color_definitions.scss는 캐스케이드에서 매우 상위에 위치해 있습니다(기본 스타일 대부분보다 앞서므로), 따라서 .modal.history-modal ins 부분을 거기에 추가하면 안 됩니다. 대신 색상 정의 자체만 추가하면 됩니다…

$dark-theme-ins: #acf2bd;
$light-theme-ins: #4da06d;

$ins: dark-light-choose($light-theme-ins, $dark-theme-ins);

:root {
  --custom-ins: #{$ins};
}

그리고 common 또는 테마의 다른 파일 중 하나에서 다음과 같이 하면 됩니다:

.modal.history-modal {
    ins {
        background: var(--custom-ins);
    }
}

[Nacho_Caballero]

크리스, 정말 감사합니다. 덕분에 해결했어요! 완벽하게 작동합니다

여기저기 테스트해 봤는데, 색상 값에 변수 보간(interpolation)이 필요한 이유가 무엇인지 이해가 안 됩니다. 예를 들어, 보간 없이 이렇게 쓰면 작동하지 않아요:

$ins: #7f7e7e;
:root {
  --custom-ins: $ins;
}

하지만 이렇게 하면 작동합니다:

$ins: #7f7e7e;
:root {
  --custom-ins: #{$ins};
}

$ins에 변수가 할당된 경우(예: $ins: $dark-theme-ins)에는 두 버전 모두 작동합니다.

무엇을 놓치고 있는 건가요?

[pmusaraj (Penar Musaraj)]

@Nacho_Caballero

내가 이해하지 못하는 유일한 점은 왜 색상 값에 변수 보간이 필요한지입니다.

CSS 커스텀 프로퍼티를 사용할 때 SCSS의 요구 사항입니다. 자세한 내용은 여기서 확인하세요: Sass: Property Declarations