CSS color-scheme 속성

정의와 사용법

color-scheme 속성은 요소가 사용할 운영 체제 색상 패턴을 나타냅니다.

운영 체제 색상 패턴의 일반적인 선택은 "light"(얇은 색상)과 "dark"(두꺼운 색상) 또는 "day mode"(일간 모드)과 "night mode"(밤간 모드)입니다.

전체 페이지를 두꺼운 색상 패턴으로 설정합니다:

:root {
  color-scheme: dark;
}

color-scheme: normal|light|dark|only light|only dark|light dark;

값	설명
normal	요소는 운영 체제의 기본 색상 패턴을 사용하여 렌더링할 수 있습니다
light	요소는 운영 체제의 얇은 색상 패턴을 사용하여 렌더링할 수 있습니다
dark	요소는 운영 체제의 두꺼운 색상 패턴을 사용하여 렌더링할 수 있습니다
only light	요소는 운영 체제의 얇은 색상 패턴만 사용하여 렌더링되어야 합니다. 브라우저가 요소의 색상 패턴을 덮어쓰는 것을 금지합니다.
only dark	요소는 운영 체제의 두꺼운 색상 패턴만 사용하여 렌더링되어야 합니다. 브라우저가 요소의 색상 패턴을 덮어쓰는 것을 금지합니다.
light dark	요소는 운영 체제의 얇은 색상 패턴이나 두꺼운 색상 패턴을 사용하여 렌더링할 수 있습니다. (사용자 설정에 따라)

기본 값:	normal
상속성:	yes
버전:	CSS Color Adjustment Module Level 1
JavaScript 문법:

테이블에 표시된 숫자는 이 특성을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.

크롬	에지	파이어폭스	사파리	오페라
81	81	96	13	68