시스템 색상은 현재 사용 중인 color-scheme
값에 반응할 수 있습니다. light-dark()
함수는 작성자에게 동일한 기능을 노출합니다.
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
에 적용됩니다.