플러그인 스타일시트는 색상에 CSS 사용자 지정 속성을 사용해야 합니다

며칠 후, 플러그인 스타일시트 컴파일 방식을 변경하는 이 PR을 코어에 병합할 예정입니다. 이 변경 사항은 플러그인 스타일시트에서 사용되는 SCSS 색상 변수에 영향을 미칩니다. 요약하자면, 이러한 변수들은 CSS 커스텀 프로퍼티로 대체되어야 합니다. 대부분의 플러그인은 이미 업데이트되었으며, 많은 경우 SCSS 변수를 CSS 커스텀 프로퍼티로 교체하는 간단한 변경 사항입니다:

-   background-color: $primary-low;
+   background-color: var(--primary-low);

Update themes and plugins to support automatic dark mode 에 있는 가이드에는 더 많은 예시와 함께 더 복잡한 색상 변환을 처리하는 방법이 나와 있습니다. (이 가이드만으로도 플러그인 개발자가 스타일이 올바르게 작동하도록 보장하는 데 필요한 모든 것을 얻을 수 있습니다.)


왜 이러한 변경 사항을 수행하는지 궁금하시다면 아래를 읽어보세요.

이전에는 테마의 색상 스킴을 SCSS 색상 변수가 사용되는 모든 위치에 포함시키기 위해 코어 및 플러그인 스타일시트가 테마별로 컴파일되었습니다. 이는 많은 수의 테마(또는 멀티사이트 환경)를 가진 사이트의 경우, 활성 테마 수만큼 코어 및 플러그인 스타일시트 수를 곱해야 모든 필요한 조합을 커버할 수 있으므로 사전 컴파일에 오랜 시간이 걸리는 문제가 있었습니다.

2020년 8월부터 자동 다크 모드 전환을 지원하기 위해, 색상 변수를 CSS 커스텀 프로퍼티로 저장하는 별도의 색상 정의 스타일시트를 추가했습니다. 이 변경 사항은 색상 스킴을 즉시 전환할 수 있게 했을 뿐만 아니라, 대부분의 스타일시트에서 색상을 추상화했습니다. CSS 커스텀 프로퍼티의 힘 덕분에 이제 스타일시트가 컴파일될 때 각 테마를 로드할 필요 없이 모든 위치(코어, 플러그인, 테마)에서 색상을 참조할 수 있습니다.

지난 몇 달 동안 모든 플러그인이 CSS 커스텀 프로퍼티를 사용하도록 전환해 왔습니다. 현재 Discourse 플러그인의 대부분이 최신 상태로 업데이트되었지만, 여전히 색상으로 SCSS 변수를 사용하고 있어 업데이트가 필요한 일부 플러그인이 있을 수 있습니다.

명확한 설명 감사합니다. 저도 거의 이해가 됩니다!

이로 인해 이러한 규칙을 따르지 않는 테마 컴포넌트를 가진 사이트에서 업그레이드와 재빌드가 실패하게 될까요? Failed to Bootstrap, due to discourse-alt-logo theme component 의 경우처럼 다른 이유로 인해 발생한 것처럼요?

그렇다면, 빌드 로그를 이해하지 못하는 사람들을 위해 오류 메시지를 더 명확하게 만들 수 있는 방법이 있을까요? 예를 들어 "업그레이드를 시도하기 전에 x 플러그인을 제거하세요"와 같은 메시지를 표시하는 것이요. 아니면, 더 좋은 방법은, 이러한 변경 사항이 임박했음을 알고 있을 때 관리 패널에서 사용자에게 경고할 수 있는 방법이 있을까요? (아마도 이미 그런 기능이 있지만 아무도 읽지 않는 것일 수도 있겠지만요).

아니요, 이로 인해 리빌드가 실패하지는 않습니다. 업데이트되지 않은 플러그인에서 색상이 잘못 표시될 수 있을 뿐입니다. 이는 아마도 직접 만든 플러그인에서만 발생할 것입니다. 메타에 게시된 대부분의 플러그인을 확인하여 최신 상태로 유지하고 있습니다.

링크하신 이슈는 이 변경 사항과는 무관합니다. 해당 이슈는 테마 컴포넌트와 관련이 있으며, 자동 업데이트 대상이 지정된 테마 컴포넌트를 자동 업데이트할 수 없는 경우 현재 우리는 리빌드를 차단하고 있습니다.

아. 축하해. 그건 미안해. 아직 이 조각들을 어떻게 조합해야 할지 감을 잡는 중이야.

다크 모드에서 문제가 발생했습니다. 인용된 텍스트의 색상을 어디서 어떻게 조정해야 하나요?

공개 카테고리에서는 문제가 없지만, 개인 메시지 버블에서는 읽을 수 없습니다.

여러 검색을 해보았지만 정확한 용어를 찾지 못했습니다.

이 문제는 토픽 링크에도 영향을 미칩니다.