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()과 같은 함수에서도 사용할 수 있습니다.

다음 예에서 사용된 background-color는 어두운 모드에서는 #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에 적용됩니다.