색상 스킴별 다른 CSS 변경 사항

개발
1

안녕하세요!

지금까지 제가 파악한 바로는, CSS를 변경하면 라이트 모드와 다크 모드 모두에 적용되는 것 같습니다. 이는 다소 비합리적인 구조로 보입니다.

최근에 제가 직면한 문제는 다음과 같습니다. 다크 모드에서 감싸진 텍스트(wrapped text)가 컨테이너(wrapper)와 동일한 색상으로 보입니다. CSS를 통해 이를 변경하면 라이트 테마의 감싸진 텍스트 색상도 함께 변경되는데, 저는 그렇게 하고 싶지 않습니다.

image
image318×244 5.52 KB

특정 색상 스킴에만 CSS를 적용하는 방법은 무엇인가요?

2

포럼 스타일 가이드(/styleguide/atoms/colors)에서 사용할 수 있는 색상 변수(예: var(--primary-very-low), var(--secondary-low))를 사용하면, 다크/라이트 모드가 서로 다른 변수를 올바르게 따르도록 설정할 수 있습니다. (다크 모드와 라이트 모드 전환에 사용 중인 두 가지 색상 팔레트에서도 이 변수들을 확인할 수 있습니다.) 관리자 설정에서 styleguide enabled 설정을 활성화해야 하며, 관리자만 스타일 가이드를 볼 수 있도록 제한하는 styleguide admin only 설정도 있습니다.

3

문제는 제가 이미 스타일 가이드에 설정된 색상 변수를 준수하지 않는 변경 사항을 적용해 두었다는 점입니다(다만 /styleguide/atoms/colors를 통해 해당 변수에 접근할 수는 없었습니다). 변수를 따르지 않고도 이를 해결할 방법이 있을까요?

4

문제를 잘 이해했다면, 이를 위해 특정 작업을 수행해야 합니다.

이 주제에 대한 가이드를 작성하고 있지만, 테마에서 정보를 직접 사용할 수 있을 정도로 명확하게 정보를 통합하는 동시에, 기초적인 기술적인 내용도 설명해야 한다는 점에서 다소 어려움을 겪고 있습니다.

가능한 한 가장 명확하게 설명하기 위해…

로컬에서 테마를 생성하는 것을 제안합니다(Install the Discourse Theme CLI console app to help you build themes 를 사용하면 도움이 됩니다).
그 다음, 테마 안의 common/color_definitions.scss 파일을 생성하여 다음 내용을 작성합니다:

$my-color: dark-light-choose(#FC3468, #FF93AC);

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

그런 다음 common/common.scss에서 변수를 다음과 같이 사용할 수 있습니다:

h1 {
  color: var(--my-color);
}

이렇게 하면 다크 모드나 라이트 모드일 때 자동으로 올바른 색상이 선택됩니다.