사용자의 밝은·어두운 테마와 고대비 환경을 고려합니다.
prefers-color-scheme은 사용자가 선호하는 밝기 테마를 감지합니다. color-scheme 속성은 폼 컨트롤과 스크롤바 같은 브라우저 UI에도 지원 색상 모드를 알립니다. 강제 색상 모드에서는 배경 이미지와 미세한 색상 차이에만 의존한 정보가 사라질 수 있습니다.
:root의 color-scheme: light dark는 이 페이지가 두 테마를 모두 지원한다고 브라우저에 알려, 어두운 테마에서는 스크롤바와 기본 폼 컨트롤도 어둡게 그려지게 합니다. 운영체제가 다크 모드면 prefers-color-scheme: dark 안의 규칙이 body와 .demo, .target의 배경을 어두운 색으로 바꾸고 .demo의 글자를 밝게 바꿉니다. .target의 테두리는 currentColor라 따로 고치지 않아도 밝아진 글자색을 따라갑니다.
상태와 조작 가능성을 누구나 알아볼 수 있게 표현할 때 필요한 규칙입니다. 색상과 움직임은 사용자 설정, 키보드 포커스와 명도 대비를 함께 확인하세요.
다크 모드에서 배경만 어둡게 바꾸고 글자·테두리·이미지 대비를 확인하지 않으면 읽기 어려워집니다.
직접 바꿔보세요운영체제 테마를 바꾸고 폼 컨트롤과 텍스트 대비를 확인하세요.