다크모드
-
CSS 다크 테마 구현Frontend 2019. 9. 14. 20:01
iOS13에 다크모드가 추가 되면서, 개별 웹 사이트의 다크 테마 구현에 관심이 쏠리고 있습니다. iSO13외에도, Android 10, MacOS 10.14부터 다크모드가 추가 되었으며, Windows10도 지난 5월 업데이트로 다크모드 사용이 가능해졌습니다. 최근 9to5mac 에 다크 테마가 적용 되었는데, OS에서 다크모드가 활성화 된 상태로 사이트에 접속하면 다크테마로, 그렇지 않은 경우 밝은 색상의 사이트로 출력됩니다. 현재 OS가 어떤 색상모드를 사용중인지 웹사이트에서 감지하려면, 애플의 제안으로 CSS사양에 추가된 prefers-color-scheme 미디어 쿼리를 사용하면 됩니다. 예제와 함께 사용법을 알아 보겠습니다. 데모용으로 사용할 HTML페이지 입니다. Lorem ipsum is ..