다크 스킴이면 컬러 스킴 색상을, 아니면 테마에서 설정한 내 색상을 사용

개발
1

다음과 같은 것을 해보고 싶습니다.

.some-link {
  @if var(--scheme-type) == 'dark' {
    color: var(--primary);
  } @else {
    color: #3b5998;
}

하지만 물론 이것은 불가능합니다. CSS에는 if가 없으며 SCSS는 런타임에서 처리되지 않기 때문입니다.

제가 볼 때 Discourse는 다크 스킴이 활성화되어 있는지 여부를 나타내는 클래스를 추가하지 않으며, CSS는 셀렉터에서 커스텀 프로퍼티를 허용하지 않습니다.

가장 좋은 우회 방법은 무엇일까요? 아이디어가 있으신가요?

2

이것이 찾으시는 내용인 것 같습니다:

즉, color_definitions.scss 파일에서 다음과 같이 작성할 수 있습니다:

$my-theme-color: dark-light-choose($primary, red);

:root {
  --my-theme-color: #{$my-theme-color};
}

그리고 테마에서 새로 만든 다크/라이트 모드 전환용 커스텀 프로퍼티를 사용하면 됩니다:

body {
  color: var(--my-theme-color);
}
3

좋아요, 동작하는 것 같습니다 :yum:

함수 이름과 매개변수 순서가 일치하지 않는 것이 좀 이상하네요.

따라서 dark-light-choose(#3b5998, $primary)로 작성해야 합니다.