[CSS] color-scheme, prefers-color-scheme 속성

 

color-scheme - CSS: Cascading Style Sheets | MDN

 

 color-scheme이란 속성을 봐서 무엇인지 찾아보았다.

요즘 웹페이지에서 많이 다크 모드를 구현하듯이 속성의 값을 'light'이나 'dark' 등을 사용하게 되면 운영체제 시스템에서 모드에 맞게 UI를 조정하는 속성인 것 같다. 

 

See the Pen Untitled by DDD120 (@DDD120) on CodePen.

 

 

위의 CSS 코드를 보면 배경색 등 따로 스타일을 지정해두지 않았음에도 배경색, 폼요소, 스크롤바 등 전체적인 인터페이스들이 모드에 맞게 조정되는 걸 볼 수 있었다.

 

 

+ prefers-color-scheme

 

prefers-color-scheme 이란 속성도 있었다. 사용자 운영체제에서 설정된 모드에 따라 보여줄 수 있는 속성이었다. 미디어 쿼리에 따라 다른 스타일을 보여줄 수 있다.

 

@media (prefers-color-scheme: dark) {
	// dark mode style
}