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

개발
2

안녕하세요,

여러 가지 방법이 있습니다.

예를 들어:

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

도움이 되길 바랍니다 :slightly_smiling_face: