2.7.0.beta5에서 색상 팔레트가 잘못 로드됩니다

기여 버그
1

오늘 아침에 2.7.0.beta5로 업데이트했는데, 많은 색상이 변경되었습니다. 색상 팔레트가 올바르게 읽히지 않는 것 같고, 대신 새 팔레트를 클릭할 때 기본적으로 제공되는 기본 색상 팔레트가 사용되고 있습니다. 아래 두 테마는 서로 다른 색상 팔레트를 사용하지만, 둘 다 CSS 첫 번째 줄에 정의된 Discourse의 “새 색상 팔레트” → 기본 팔레트: Light가 적용됩니다.

예시 1:
이것은 테마의 색상 팔레트입니다:

image
image688×649 24.9 KB

CSS의 첫 번째 줄은 다음과 같습니다.

$primary: #222222 !default; $secondary: #ffffff !default; $tertiary: #0088cc !default; $quaternary: #e45735 !default; $header_background: #ffffff !default; $header_primary: #333333 !default; $highlight: #ffff4d !default; $danger: #e45735 !default; $success: #009900 !default; $love: #fa6c8d !default;

예시 2:
이것은 테마의 색상 팔레트입니다:

image
image384×512 85.6 KB

CSS의 첫 번째 줄은 다음과 같습니다.

$primary: #222222 !default; $secondary: #ffffff !default; $tertiary: #0088cc !default; $quaternary: #e45735 !default; $header_background: #ffffff !default; $header_primary: #333333 !default; $highlight: #ffff4d !default; $danger: #e45735 !default; $success: #009900 !default; $love: #fa6c8d !default;

빈 새 테마를 시작하여 팔레트를 추가하면 예상대로 작동하지만, 기존 테마의 경우 할당된 팔레트 대신 기본 라이트 팔레트가 로드됩니다.

1개의 좋아요
2

지금까지 제가 찾을 수 있는 유일한 우회 방법은 원하는 sass 색상 변수를 각 테마와 컴포넌트에 수동으로 추가하는 것입니다.

1개의 좋아요
4

이 문제를 재현할 수 없습니다… 기존 테마에서 색상 팔레트를 변경하면 여전히 올바르지 않은가요?

3개의 좋아요
5

우리도 동일한 문제를 겪고 있는 것 같습니다. 2.7.0.beta5(6c57f6f49d)로 업데이트한 후, 테마 컴포넌트에서 컬러 스킴이 더 이상 적용되지 않았습니다.

우리는 다음을 사용했습니다:

#meta-links {
    background-color: $header_background;
}

그러나 배경색이 컬러 스킴에 정의된 색상이 아니라 #fff로 표시되었습니다.

다음과 같이 시도해 보았습니다:

  • 테마에 컬러 스킴을 다시 할당
  • 컬러 스킴을 복사한 후 그 복사본을 테마에 할당
  • 테마 컴포넌트를 테마에 다시 할당

하지만 작동하지 않는 것 같습니다. 현재 임시 해결책은 CSS에서 색상을 수동으로 설정하는 것입니다.

2개의 좋아요
6

현재 일어나고 있는 일은 기본 테마의 팔레트는 올바르게 로드되지만, 컴포넌트에 대해서는 그렇지 않다는 것입니다. 따라서 컴포넌트를 사용하지 않는 페이지 부분은 올바른 색상을 유지하지만, 컴포넌트에 의존하는 부분은 테마에 할당된 팔레트 대신 Discourse의 기본 “Light” 팔레트를 로드합니다.

개발자 도구에서 확인한 결과
color_definitions.scss에는 올바른 팔레트가 포함되어 있습니다.

image
image973×118 12.9 KB

desktop.scss에도 올바른 팔레트가 포함되어 있습니다.
image

컴포넌트인 theme_174.scss는 기본 Light 팔레트를 사용합니다.
image

theme_171은 common.css에 다음 CSS 라인만 포함된 컴포넌트입니다.

#banner {
    margin: auto 20px;
    background-color: $primary-low;
    max-width: 880px;
    border: 1px solid #999 ;
}
2개의 좋아요
7

@gkln 님과 @smrtey 님, 추가 정보 주셔서 감사합니다… 시도해볼 수 있는 방법 중 하나는 컴포넌트를 하나씩 비활성화하여 어떤 변화가 있는지 확인하는 것입니다… 어딘가에서 보고되지 않는 조용한 오류가 존재하여 컴포넌트의 CSS가 깨지는 원인일 수 있습니다.

8

scss 색상 변수를 사용하는 모든 컴포넌트에서 발생하는 것 같습니다. 모든 개별 컴포넌트에 색상을 수동으로 추가하면 모든 것이 정상적으로 작동합니다:

$primary: #22262a !important; $secondary: #fefefe !important; $tertiary: #2572e4 !important; $quaternary: #518ee9 !important; $header_background: #1550a7 !important; $header_primary: #fcfcfc !important; $highlight: #9edaf5 !important; $danger: #ff7114 !important; $success: #85cc54 !important; $love: #de0100 !important;

하지만 이는 이상적인 해결책과는 거리가 멉니다. 이 문제를 어떻게 해결해야 할지 감이 잡히지 않습니다. Discourse가 다른 색상 팔레트를 로드하게 만드는 원인을 파악할 능력은 전혀 없습니다.

1개의 좋아요
12

네, @pmusaraj 님이 자세히 살펴본 결과 버그를 발견했습니다… 해당 문제는 여기에서 수정되었습니다:

…따라서 사이트를 다시 업데이트하면 문제가 해결될 것입니다.

만약 여러분이 직접 만든 테마 컴포넌트라면, SCSS 변수 대신 CSS 커스텀 프로퍼티를 사용하도록 업데이트하는 것을 권장합니다. 이렇게 하면 자동 다크 모드를 사용할 수 있고 색상 오버라이드도 더 쉬워집니다. 자세한 내용은 여기에서 확인하세요:

6개의 좋아요