선택된 색상 스킴에 따라 요소의 색상을 설정하는 방법을 알아보고 있습니다. 다음 코드는 라이트 모드에서는 잘 작동하지만, 다크 모드에서는 그렇지 않습니다.
.d-header-icons .d-icon {
width: 100%;
line-height: 1.4;
display: inline-block;
color: var(--secondary);
}
다크 모드에서만 아래처럼 적용되기를 원합니다.
color: var(--secondary-low)
이것은 다크 모드에서는 잘 작동하지만, 라이트 모드에서는 그렇지 않습니다. 선택된 색상 스킴에 따라 color: 값을 조정하는 방법이 있을까요?
안녕하세요,
여러 가지 방법이 있습니다.
예를 들어:
admin/customize/colors/에서 색상 스킴 색상을 변경할 수 있습니다. 다크 모드 색상 스킴을 선택한 후 secondary 색상 코드를 변경하면 됩니다.
참고: 이렇게 하면 헤더 아이콘뿐만 아니라 모든 곳의 보조 색상이 변경됩니다.
또는 prefers-color-scheme 미디어 쿼리를 사용하여 다크 모드에서 secondary를 secondary-low로 변경할 수도 있습니다.
다음과 같이 작성할 수 있습니다:
.d-header-icons .d-icon {
width: 100%;
line-height: 1.4;
display: inline-block;
color: var(--secondary);
@media (prefers-color-scheme: dark) {
color: var(--secondary-low);
}
}
또는 사용자 정의 색상 정의를 만들 수도 있습니다: Why might dark-light-choose() not work? - #2 by awesomerobot
도움이 되길 바랍니다 
가이드를 알려주셔서 감사합니다.
이것이 제가 하려는 것(모든 --secondary 색상 항목이 아니라 헤더 아이콘만 변경)과 정확히 일치하는 것 같습니다. 마지막 질문이 하나 더 있습니다 … 현재 테마가 다크 모드 테마로 설정되어 있고 OS에 의해 다크 모드가 활성화된 경우에만 작동하며, 다크 모드 테마를 “기본(Regular)” 테마로 선택한 경우에는 작동하지 않습니다. 이 부분에 대해 제안 사항이 있을까요?
네, 다크 컬러 스킴을 선택할 수 있다면 그렇게 작동하지 않을 것입니다.
가장 좋은 방법은 이 용도로 커스텀 색상 정의를 생성하는 것이며, 이 색상 변수를 헤더 아이콘에 사용할 수 있습니다.
테마 컴포넌트를 생성하고 색상 정의 탭에 다음을 추가하세요.
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);
}
정말 잘 작동했어요! 감사합니다!
한 가지만 더 여쭤볼게요 … 테마 컴포넌트를 사용하지 않고 color_definitions.scss를 테마에 포함하면 이 방법이 작동할까요?
네, 그 방법도 작동합니다.