CSS로 다크 모드 인식하기

요즘 운영체제들은 대부분 라이트 모드/다크 모드를 지원하죠?
CSS 미디어 쿼리에서도 자동으로 라이트 모드와 다크 모드를 인식하고 그에 맞는 CSS를 적용할 수 있는 속성이 있습니다.

바로 prefers-color-scheme!

See the Pen CSS) Detect Dark Mode by 1 Minute Coding(1분코딩) (@1mincoding) on CodePen.

라이트 모드에서는 흰 바탕에 검은 글씨로 “Light Mode”라는 글씨가 나타나고,
다크 모드에서는 검은 바탕에 밝은색 글씨로 “Dark Mode”라는 글씨가 나타납니다.

역시 우리의 IE는 지원하지 않아요.
스펙에 대한 자세한 내용은 아래 링크에서 확인해 보세요~
https://developer.mozilla.org/ko/docs/Web/CSS/@media/prefers-color-scheme[새창]

참고로 윈도는 설정창의 아래 그림에 표시한 부분(설정 > 개인 설정 > 색)에서 색상 모드를 바꿀 수 있습니다. 제가 윈알못이라 그런지 몰라도 맥에 비해 찾기가 좀 어렵더라고요~