Light-dark()를 사용한 CSS 색상 스키마에 종속된 색상

시스템 색상은 현재 사용되는 color-scheme 값에 반응할 수 있습니다. light-dark() 함수는 작성자에게 동일한 기능을 노출합니다.

Bramus

CSS의 시스템 색상

CSS에서는 여러 색상 공간 중 하나의 여러 색상을 사용할 수 있습니다. 예를 들어 이름이 지정된 색상, 16진수 색상, 특정 색상 공간에 연결된 색상 함수, 좀 더 일반적인 color() 함수를 사용할 수 있습니다.

예를 들어 이름이 지정된 색상 cornflowerblue는 #6495ED, hsl(218.54deg 79.19% 66.08%) 또는 color(display-p3 0.43 0.58 0.9)로도 표현할 수 있습니다.

CSS에는 이렇게 다양한 이름과 형식 외에도 CSS 색상 모듈 레벨 4에 지정된 시스템 색상으로 설명된 색상이 있습니다. 이러한 시스템 색상은 브라우저에 의해 정의되는 색상이며 키워드로 표현됩니다.

예를 들어 <canvas> 요소와 혼동해서는 안 되는 시스템 색상인 Canvas는 '애플리케이션 콘텐츠 또는 문서의 배경'을 나타냅니다. '애플리케이션 콘텐츠 또는 문서의 텍스트'를 나타내는 CanvasText와 잘 페어링되며 함께 사용하도록 되어 있습니다.

CSS에서 다음과 같이 사용합니다.

body {
  color: CanvasText;
  background-color: Canvas;
}

기본적으로 CanvasText의 색상은 black에 근접하고 Canvas는 white에 가까운 색상입니다. 실제 구현은 브라우저에 따라 다릅니다. 예를 들어 Chrome의 CanvasText는 #121212이 되는 반면 Safari에서는 약간 더 가벼운 #1e1e1e로 지정됩니다.

이러한 시스템 색상의 숨겨진 강점은 color-scheme 속성의 계산된 값에 응답할 수 있다는 것입니다. 예를 들어 사용된 color-scheme가 dark이면 CanvasText 및 Canvas 값이 뒤집힙니다.

:root {
  color-scheme: dark;
}

body {
  color: CanvasText;
  background-color: Canvas;
}

다음 데모에서 :root에 설정된 color-scheme의 값을 변경하고 페이지가 어떻게 반응하는지 확인할 수 있습니다.

• light dark로 설정하면 요소가 밝은 모드와 어두운 모드를 모두 지원함을 나타냅니다. 사용할 값은 prefers-color-scheme 미디어 조건 값에 따라 다릅니다.
• light로 설정하면 요소가 밝은 색 구성표를 지원함을 나타냅니다.
• dark로 설정하면 요소가 어두운 색 구성표를 지원함을 나타냅니다.

light-dark() 소개

지금까지는 사용된 color-scheme 값에 반응하는 것이 시스템 색상에 예약되어 있었습니다. CSS 색상 모듈 레벨 5에 지정된 light-dark() 덕분에 이제 동일한 기능을 사용할 수 있습니다.

light-dark()는 두 개의 인수를 허용하는 함수입니다. 두 인수는 모두 <color>여야 합니다. 사용된 색 구성표에 따라 둘 중 하나가 선택됩니다.

• 사용된 색 구성표가 light이거나 알 수 없는 경우 첫 번째 값의 계산된 값이 반환됩니다.
• 사용된 색 구성표가 dark이면 두 번째 색상의 계산된 값이 반환됩니다.

light-dark()의 결과는 <color>입니다. <color>가 허용되는 모든 CSS에서 사용할 수 있습니다. 예를 들어 color 및 background-color 속성뿐만 아니라 linear-gradient()와 같은 함수에서도 사용할 수 있습니다.

다음 예에서 사용된 배경 색상은 어두운 모드의 #333 또는 밝은 모드 (또는 알 수 없는 모드)의 #ccc입니다.

:root {
  color-scheme: light dark;
}

body {
  background-color: light-dark(#ccc, #333);
}

light-dark()가 올바르게 작동하려면 color-scheme를 지정해야 합니다. 이 속성은 상속되므로 일반적으로 :root에서 설정하지만 원하는 경우 특정 요소에서 설정할 수 있습니다.

실용적인 적용

다음 예에서 몇 가지 커스텀 속성이 페이지의 색상을 나타냅니다. 어두운 모드를 처리하기 위해 이러한 맞춤 속성의 값을 prefers-color-scheme 미디어 조건의 다른 값으로 덮어씁니다.

:root {
  --primary-color: #333;
  --primary-background: #e4e4e4;
  --highlight-color: hotpink;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary-color: #fafafa;
    --primary-background: #121212;
    --highlight-color: lime;
  }
}

light-dark() 덕분에 이 코드를 단순화할 수 있습니다. color-scheme가 :root에서 light dark로 설정되어 있으므로 OS를 밝은 모드에서 어두운 모드로 또는 그 반대로 변경할 때 이러한 색상 값이 자동으로 변경됩니다.

:root {
  color-scheme: light dark;
  --primary-color: light-dark(#333, #fafafa);
  --primary-background: light-dark(#e4e4e4, #121212);
  --highlight-color: light-dark(hotpink, lime);
}

또한 color-scheme를 dark 또는 light로 설정하여 DOM의 특정 하위 트리가 밝은 모드 또는 어두운 모드만 사용하도록 할 수 있습니다. 다음 예에서는 :root에 적용됩니다.