풀 테마

안녕하세요 @Renato_Mendes :wave:

아, 알겠습니다. 특정 색상 스키마에서만 투명한 배경을 사용하고 싶으셨군요. 그걸 몰랐네요.

다음과 같은 여러 가지 방법이 있습니다 :arrow_down_small:

  1. dark-light-choose(): 이 함수를 사용하면 가능하지만, 변수를 생성하기 때문에 이 경우에는 실용적이지 않습니다. 색상 설정에 사용하는 것이 더 좋습니다.

  1. schemeType: 스키마 유형별로 사용하려면 이 방법이 이 사용 사례에 더 적합합니다.
schemeType 사용 방법

schemeType 사용 방법은 다음과 같습니다.

만든 컴포넌트에서 이전 코드를 삭제하고, 이미지에서 보는 것처럼 Color Definitions 섹션에 새 코드를 배치하세요.

이렇게 하면 라이트 스키마에서만 코드가 활성화됩니다.

Common / Color Definitions

@if #{schemeType()} == light {
  .desktop-view {
    .has-sidebar-page {
      .d-header-wrap {
        &:before {
          background: transparent;
          border-right: none;
        }
      }
    }
  }
}

  1. Targetable Color Schemes : 더 많은 색상 스키마가 있거나, 변경하려는 특정 색상 스키마를 지정해야 한다면 이 테마 컴포넌트가 이상적입니다.
Targetable Color Schemes 사용 방법

이 컴포넌트는 실제 색상 스키마를 html 태그에 추가하여 CSS로 지정할 수 있게 합니다.

사용 방법은 다음과 같습니다:

컴포넌트를 설치하세요.
변경하려는 색상 스키마의 id를 확인하세요.
여기에서 찾을 수 있습니다.

또는

/admin/customize/colors
Colors 페이지에서 색상 스키마를 클릭하면 id가 URL에 추가됩니다.

이제 코드에서 이를 사용할 수 있습니다. 이전에 추가한 코드를 제거하는 것을 잊지 마세요.

html[color-scheme="your-color-scheme-id"] {  
  &.desktop-view {
    .has-sidebar-page {
      .d-header-wrap {
        &:before {
          background: transparent;
          border-right: none;
        }
      }
    }
  }
}

안녕하세요 @packman :wave: DM을 보냈습니다.

2개의 좋아요