선택된 색상 스킴에 기반한 CSS 요소

개발
4

네, 다크 컬러 스킴을 선택할 수 있다면 그렇게 작동하지 않을 것입니다.

가장 좋은 방법은 이 용도로 커스텀 색상 정의를 생성하는 것이며, 이 색상 변수를 헤더 아이콘에 사용할 수 있습니다.

테마 컴포넌트를 생성하고 색상 정의 탭에 다음을 추가하세요.

Screenshot 2022-10-18 at 20.56.24
Screenshot 2022-10-18 at 20.56.241089×496 39.2 KB

secondary-low 색상 코드를 $dark-theme-header-icons로, secondary 색상 코드를 $light-theme-header-icons로 설정하세요.

$dark-theme-header-icons: #e9e9e9;
$light-theme-header-icons: #222;

$header-icons: dark-light-choose($light-theme-header-icons, $dark-theme-header-icons);

:root {
  --custom-header-icons: #{$header-icons};
}

이후 이 --custom-header-icons 색상 변수를 헤더 아이콘 색상에 사용할 수 있습니다.

.d-header-icons .d-icon {
  width: 100%;
  line-height: 1.4;
  display: inline-block;
  color: var(--custom-header-icons);
}