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로 설정하면 요소가 어두운 색 구성표를 지원함을 나타냅니다.
color-scheme 값을 변경할 수 있는 페이지입니다. 변경하면 body 요소의 선언은 동일하게 유지되지만 밝은 모드에서 어두운 모드로 전환하거나 그 반대로 전환할 때 페이지의 색상이 변경됩니다.

light-dark() 소개

Browser Support

  • Chrome: 123.
  • Edge: 123.
  • Firefox: 120.
  • Safari: 17.5.

Source

지금까지는 사용된 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;
  }
}
prefers-color-scheme를 통해 밝은 모드 또는 어두운 모드에 반응하는 페이지.
미디어 쿼리를 사용하여 CSS에서 색상 값이 변경됩니다.

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);
}
prefers-color-scheme를 사용하여 밝은 모드 또는 어두운 모드에 반응하는 페이지
색상 값은 light-dark()를 사용하여 변경됩니다.

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

prefers-color-scheme를 사용하여 밝은 모드 또는 어두운 모드에 응답하는 페이지
light-dark()를 사용하여 색상 값이 변경됩니다.
옵션 중 하나를 사용하여 밝은 모드 또는 어두운 모드를 강제할 수 있습니다. 이는 color-scheme 값을 조작하여 달성할 수 있습니다.