color-scheme CSS 속성과 상응하는 메타 태그를 사용하면 개발자가 페이지에서 사용자 에이전트 스타일시트의 테마별 기본값을 선택할 수 있습니다.
배경
prefers-color-scheme 사용자 환경설정 미디어 기능
prefers-color-scheme 사용자 환경설정 미디어 기능을 사용하면 개발자가 페이지 모양을 완전히 제어할 수 있습니다.
이 기능에 익숙하지 않다면
prefers-color-scheme: 안녕하세요, 내 오래된 친구 문서를 읽어 보시기 바랍니다.
이 문서에는 놀라운 어두운 모드 환경을 만드는 방법에 관해 제가 아는 모든 내용이 수록되어 있습니다.
이 기사에서 간단히 언급한 퍼즐 조각은 color-scheme CSS 속성과 같은 이름의 상응하는 메타 태그입니다.
이 두 가지 기능을 사용하면 양식 컨트롤, 스크롤바, CSS 시스템 색상 등
사용자 에이전트 스타일시트의 테마별 기본값을
페이지에 선택할 수 있으므로 개발자의 업무가 더 수월해집니다.
동시에 이 기능은 브라우저가 변환을 자체적으로 적용하지 못하게 합니다.
브라우저 지원
prefers-color-scheme
color-scheme
사용자 에이전트 스타일시트
계속하기 전에 사용자 에이전트 스타일시트가 무엇인지 간단히 설명해 드리겠습니다. 대부분의 경우 사용자 에이전트 (UA)는 브라우저라고 부르는 간단한 의미로 생각할 수 있습니다. UA 스타일시트는 페이지의 기본 디자인과 분위기를 결정합니다. 이름에서 알 수 있듯이 UA 스타일시트는 해당 UA에 따라 달라집니다. Chrome 및 Chromium의 UA 스타일 시트를 살펴보고 Firefox 또는 Safari 및 WebKit의 UA 스타일시트와 비교할 수 있습니다. 일반적으로 UA 스타일시트는 대부분의 사항에 동의합니다. 예를 들어 링크는 모두 파란색, 일반 텍스트는 검은색, 배경 색상은 흰색으로 만들지만 양식 컨트롤의 스타일을 지정하는 방법과 같은 중요하고 때로는 불편한 차이점도 있습니다.
WebKit의 UA 스타일시트와 어두운 모드에서의 기능을 자세히 살펴보세요.
(스타일시트에서 'dark'에 전체 텍스트를 검색하세요.)
스타일시트에서 제공하는 기본값은 어두운 모드의 사용 설정 여부에 따라 변경됩니다. 이를 설명하기 위해 :matches 유사 클래스 및 -apple-system-control-background와 같은 WebKit 내부 변수, WebKit 내부 전처리기 지시어 #if defined를 사용하는 CSS 규칙 하나가 있습니다.
input,
input:matches([type="password"], [type="search"]) {
-webkit-appearance: textfield;
#if defined(HAVE_OS_DARK_MODE_SUPPORT) &&
HAVE_OS_DARK_MODE_SUPPORT
color: text;
background-color: -apple-system-control-background;
#else
background-color: white;
#endif
/* snip */
}
위의 color 및 background-color 속성에 비표준 값이 표시됩니다.
text와 -apple-system-control-background 모두 유효한 CSS 색상이 아닙니다.
이는 WebKit 내부의 시맨틱 색상입니다.
CSS에는 표준화된 시맨틱 시스템 색상이 있습니다.
이러한 색상은 CSS 색상 모듈 수준 4에 지정되어 있습니다.
예를 들어 Canvas(<canvas> 태그와 혼동해서는 안 됨)은 애플리케이션 콘텐츠 또는 문서의 배경에 사용되고, CanvasText는 애플리케이션 콘텐츠 또는 문서의 텍스트에 사용됩니다.
이 두 가지는 함께 사용할 수 있으며 따로 사용해서는 안 됩니다.
UA 스타일시트는 고유한 독점 색상 또는 표준화된 시맨틱 시스템 색상을 사용하여 기본적으로 HTML 요소가 렌더링되는 방식을 결정할 수 있습니다.
운영체제가 어두운 모드로 설정되거나 어두운 테마를 사용하면 CanvasText (또는 text)는 조건부로 흰색으로 설정되고 Canvas (또는 -apple-system-control-background)는 검은색으로 설정됩니다.
그러면 UA 스타일시트는 다음 CSS를 한 번만 할당하여 밝은 모드와 어두운 모드를 모두 다룹니다.
/**
Not actual UA stylesheet code.
For illustrative purposes only.
*/
body {
color: CanvasText;
background-color: Canvas
}
color-scheme CSS 속성
CSS 색상 조정 모듈 수준 1 사양에서는 어두운 모드, 대비 조정 또는 원하는 특정 색 구성표와 같은 사용자 환경설정을 처리하기 위해 사용자 에이전트의 자동 색상 조정에 대한 모델과 컨트롤을 소개합니다.
안에 정의된 color-scheme 속성을 사용하면 요소가 렌더링하기에 적합한 색 구성표를 나타낼 수 있습니다.
이러한 값은 사용자의 환경설정에 따라 협상되며, 따라서 선택된 색 구성표는 양식 컨트롤 및 스크롤바의 기본 색상과 사용된 CSS 시스템 색상 값과 같은 사용자 인터페이스 (UI) 항목에 영향을 미칩니다.
현재는 다음과 같은 값이 지원됩니다.
normal: 요소가 색 구성표를 전혀 인식하지 못하므로 요소가 브라우저의 기본 색 구성표로 렌더링되어야 함을 나타냅니다.[ light | dark ]+요소가 나열된 색 구성표를 인식하고 처리할 수 있음을 나타내며, 그 사이에 순서가 지정된 환경설정을 표현합니다.
이 목록에서 light는 밝은 배경색과 어두운 포그라운드 색상으로 구성된 밝은 색 구성표를 나타내고, dark은 반대를 나타내며 어두운 배경 색상과 밝은 전경색을 나타냅니다.
모든 요소의 경우 색 구성표로 렌더링하면 요소에 대해 브라우저에서 제공하는 모든 UI에서 사용되는 색상이 색 구성표의 인텐트와 일치해야 합니다. 스크롤바, 맞춤법 검사 밑줄, 양식 컨트롤 등을 예로 들 수 있습니다.
:root 요소에서 색 구성표를 사용한 렌더링은 캔버스의 표면 색상 (전체 배경 색상), color 속성의 초깃값 및 사용된 시스템 색상 값에 추가로 영향을 주어야 하며 표시 영역의 스크롤바에도 영향을 줍니다.
/*
The page supports both dark and light color schemes,
and the page author prefers dark.
*/
:root {
color-scheme: dark light;
}
color-scheme 메타 태그
color-scheme CSS 속성을 적용하려면 CSS를 먼저 다운로드하고(<link rel="stylesheet">를 통해 참조되는 경우) 파싱해야 합니다.
사용자 에이전트가 원하는 색 구성표로 페이지 배경을 즉시 렌더링할 수 있도록 <meta name="color-scheme"> 요소에 color-scheme 값을 제공할 수도 있습니다.
<!--
The page supports both dark and light color schemes,
and the page author prefers dark.
-->
<meta name="color-scheme" content="dark light">
color-scheme 및 prefers-color-scheme 결합
메타 태그와 CSS 속성 (:root 요소에 적용된 경우)은 모두 동일한 동작을 초래하므로 브라우저가 선호하는 구성표를 더 빨리 채택할 수 있도록 항상 메타 태그를 통해 색 구성표를 지정하는 것이 좋습니다.
절대 기준 페이지의 경우 추가 CSS 규칙이 필요하지 않지만
일반적으로 항상 color-scheme와 prefers-color-scheme를 결합해야 합니다.
예를 들어 WebKit 및 Chrome에서 기본 링크 파란색 rgb(0,0,238)에 사용하는 독점 WebKit CSS 색상 -webkit-link는 검은색 배경에서 명암비가 2.23:1로 충분하지 않으며 WCAG AA 및 WCAG AAA 요구사항을 모두 실패합니다.
이 문제를 해결하기 위해 Chrome, WebKit, Firefox 버그와 HTML 표준의 메타 문제를 해결했습니다.
prefers-color-scheme와의 상호작용
처음에는 color-scheme CSS 속성과 그에 상응하는 메타 태그와 prefers-color-scheme 사용자 환경설정 미디어 기능이 상호작용하는 것이 처음에는 혼란스러워 보일 수 있습니다.
실제로 둘은 정말 잘 어울립니다.
이해해야 할 가장 중요한 점은 color-scheme는 기본 모양만 결정하지만 prefers-color-scheme는 스타일 지정 가능한 모양을 결정한다는 것입니다.
이해를 돕기 위해 다음 페이지를 가정해 보겠습니다.
<head>
<meta name="color-scheme" content="dark light">
<style>
fieldset {
background-color: gainsboro;
}
@media (prefers-color-scheme: dark) {
fieldset {
background-color: darkslategray;
}
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, legere ancillae ne vis.
</p>
<form>
<fieldset>
<legend>Lorem ipsum</legend>
<button type="button">Lorem ipsum</button>
</fieldset>
</form>
</body>
페이지의 인라인 CSS 코드는 일반적으로 <fieldset> 요소의 background-color을 gainsboro로 설정하고 사용자가 prefers-color-scheme 사용자 환경설정 미디어 기능에 따라 dark 색 구성표를 선호하는 경우 darkslategray로 설정합니다.
페이지는 <meta name="color-scheme" content="dark light"> 요소를 통해 어두운 테마와 밝은 테마가 지원되고 어두운 테마가 선호됨을 브라우저에 알립니다.
운영체제가 어두운 모드로 설정되어 있는지 밝은 모드로 설정되어 있는지에 따라 사용자 에이전트 스타일시트에 따라 전체 페이지가 어두운 모드로 표시되거나 그 반대로 표시됩니다. 페이지의 단락 텍스트나 배경 색상을 변경하는 데 개발자가 제공하는 추가 CSS가 없습니다.
<fieldset> 요소의 background-color는 페이지에서 개발자가 제공한 인라인 스타일시트의 규칙에 따라 어두운 모드의 사용 설정 여부에 따라 어떻게 변경됩니다.
gainsboro 또는 darkslategray입니다.
<fieldset> 요소의 background-color는 인라인된 개발자 스타일시트에 따라 gainsboro입니다.
<fieldset> 요소의 background-color는 인라인된 개발자 스타일시트에 따라 darkslategray입니다.
<button> 요소의 모양은 사용자 에이전트 스타일시트에 의해 제어됩니다.
color는 ButtonText 시스템 색상으로 설정되고 background-color 및 border-color 4개는 시스템 색상 ButtonFace로 설정됩니다.
background-color 및 다양한 border-color가 ButtonFace 시스템 색상으로 설정됩니다.
이제 <button> 요소의 border-color가 어떻게 변경되는지 확인합니다.
사용자 에이전트가 색 구성표에 따라 ButtonFace를 동적으로 업데이트하므로 border-top-color 및 border-bottom-color의 계산된 값이 rgba(0, 0, 0, 0.847) (검은색)에서 rgba(255, 255, 255, 0.847) (흰색)으로 전환됩니다.
이는 상응하는 시스템 색상 ButtonText으로 설정된 <button> 요소의 color에도 적용됩니다.
ButtonFace로 설정된 border-top-color 및 border-bottom-color의 계산된 값이 이제 rgba(0, 0, 0, 0.847)입니다.
ButtonFace로 설정된 border-top-color 및 border-bottom-color의 계산된 값이 이제 rgba(255, 255, 255, 0.847)입니다.
데모
다수의 HTML 요소에 적용된 color-scheme의 효과는 Glitch의 데모에서 확인할 수 있습니다.
데모는 위의 경고에 언급된 링크 색상을 사용하여 WCAG AA 및 WCAG AAA 위반을 의도적으로 보여줍니다.
color-scheme: light로 전환되었습니다.
color-scheme: dark으로 전환되었습니다.
링크 색상과 함께 WCAG AA 및 WCAG AAA
위반
을 확인하세요.
감사의 말씀
color-scheme CSS 속성과 이에 상응하는 메타 태그는 Rune Lillesveen에 의해 구현되었습니다.
Rune은 CSS 색상 조정 모듈 레벨 1 사양의 공동 편집자이기도 합니다.
히어로 이미지: 필립 레오네, Unsplash