커스텀 변수를 색상 스킴에 적용

색상 스킴에 사용자 정의 CSS 변수를 추가할 수 있는 기능이 유용할 것 같습니다.

제 사용 사례는 다음과 같습니다. 포럼에 커스텀 헤더를 사용하고 있는데, 라이트 모드에서는 회사 로고가 파란색으로, 다크 모드에서는 흰색으로 표시되기를 원합니다. 특정 색상 스킴을 타깃으로 하는 CSS를 작성할 방법이 없기 때문에, 현재로서는 이것이 어떻게 가능한지 모르겠습니다. 다크 테마와 라이트 테마를 별도로 만들 수는 있지만, 그렇게 하면 자동 다크 모드를 사용할 수 없게 됩니다. 자동 다크 모드는 테마가 아니라 색상 스킴만 전환할 수 있기 때문입니다.

대안으로, html 또는 body 태그에 선택된 색상 스킴을 나타내는 CSS 클래스를 추가해 주면, 특정 색상 스킴을 타깃으로 하는 CSS를 작성할 수 있으므로 이 문제가 해결될 것입니다.

1개의 좋아요

로고만 처리해야 한다면, 백엔드 설정에 다크 스킴용 로고를 위한 전용 슬롯이 있습니다:

1개의 좋아요

도움이 된다면, 라이트/다크 모드에서 다르게 동작하는 CSS를 사용할 수 있습니다. color_definitions라는 특수 스타일시트가 있습니다… 이 스타일시트를 사용하는 방법에 대한 예시는 여기 있습니다: Why might dark-light-choose() not work? - #2 by awesomerobot

6개의 좋아요

고마워요. 이미 그렇게 할 수 있다는 걸 몰랐어요. 제가 필요했던 바로 그거였어요! 다크 테마 로고도 좋은 지적이에요. 그런 게 있다는 걸 몰랐거든요.

1개의 좋아요