사용자의 밝은·어두운 테마와 고대비 환경을 고려합니다.
prefers-color-scheme은 사용자가 선호하는 밝기 테마를 감지합니다. color-scheme 속성은 폼 컨트롤과 스크롤바 같은 브라우저 UI에도 지원 색상 모드를 알립니다. 강제 색상 모드에서는 배경 이미지와 미세한 색상 차이에만 의존한 정보가 사라질 수 있습니다.
이번 예제의 출발점은 color-scheme: light dark; @media (prefers-color-scheme:dark)입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
상태와 조작 가능성을 누구나 알아볼 수 있게 표현할 때 필요한 규칙입니다. 색상과 움직임은 사용자 설정, 키보드 포커스와 명도 대비를 함께 확인하세요.
처음에는 예제를 그대로 확인한 다음 운영체제 테마를 바꾸고 폼 컨트롤과 텍스트 대비를 확인하세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
다크 모드에서 배경만 어둡게 바꾸고 글자·테두리·이미지 대비를 확인하지 않으면 읽기 어려워집니다.
직접 바꿔보세요운영체제 테마를 바꾸고 폼 컨트롤과 텍스트 대비를 확인하세요.