프론트엔드/다크모드

prefers-color-scheme 과 다크모드 적용 실무 팁

개요 다크 모드를 적용하다가 몇가지 시행착오를 겪었다. CSS 에서 @media (prefers-color-scheme: dark) 라는 부분에 대한 이해가 부족했기 때문이다. prefers-color-scheme 란? 요즘은 OS 에서 선호하는 컬러 모드를 설정할 수 있고, 그 결과가 prefers-color-scheme 이다. Mozilla CSS @Media prefers-color-scheme 공식문서 에서 자세한 내용을 볼 수 있다. 나중에는 다른 컬러를 지원할지 모르겠지만, 현재는 light 와 dark 중 선택하는 하는 것만 존재한다. 이 부분은 개발자가 임의로 javascript 로 변경할 수 없는 부분이며, OS 에서 설정하는 곳이 있다. 처음 다크모드를 개발할 때 이 부분을 내가 자바스..