최종 수정일 : 2020-11-20T22:53 (1년 전) 다크 모드(다크 테마)란, 밝은 배경에 어두운 글자 대신 어두운 배경에 밝은 글자를 사용하는 것입니다. 눈의 피로를 줄이기 위해 선호하는 사람이 꽤 있고, 콘트라스트(Contrast)가 높아지기에 텍스트나 이미지를 강조하는 데도 효과적입니다만, 긴 글을 표시해야 할 땐 독이 될 수 있으며, 난시 등의 이유로 어두운 배경에선 글자를 읽기 어려워하는 사용자도 있어 호불호도 꽤 갈리는 편입니다. 선호 테마 감지하기상술했듯 다크 테마는 꽤 호불호가 갈리기에, 사용자가 어떤 테마를 선호하는지 먼저 확인할 필요가 있습니다. CSS
Javascriptwindow.matchMedia("(prefers-color-scheme: dark)").matches 테마 변경 기능을 넣지 않으려면 위 CSS로 충분하겠지만, 테마를 변경하는 기능을 추가하시려면 JS에서 선호 테마를 감지할 필요가 있습니다. 다크 테마 추가Pure CSS테마를 변경하지 않고 시스템 테마만 따르려면 CSS로만 작업하셔도 충분합니다.
CSS는 스타일이 겹치면 더 아래에 있는 걸 적용하기 때문에, 반드시 다크 테마의 스타일이 아래로 오게만 해주시면 됩니다. Class
사용자가 다크 테마를 사용하면 이 스크립트를
CSS는 Pure CSS로 작성한 것과 크게 다르지 않지만
CSS 변수위의
CSS 변수를 이용해 지금은 워낙 HTML과 CSS가 간단해 위 CSS보다 길어졌지만, 이들이 복잡해지면 복잡해질수록 이 방법이 편하실 겁니다. 하나 안타까운 건, 굉장히 오래된 브라우저는 CSS 변수를 지원하지 않는단 것입니다. (참고 : Can I Use) 선호 테마 저장하기페이지를 불러올 때마다 선호하는 테마를 사용하기 위해 버튼을 클릭할 순 없으니, 이를 저장할 차례입니다. * 본문과 크게 관련 없지만, localStorage엔 문자열만 저장할 수 있고, 메인 쓰레드를 차단할 여지도 있기에, 큰 데이터를 다루실 땐 IndexedDB를 이용하시는 걸 추천합니다.
버튼을 클릭할 때,
다음에 테마를 확인할 때 localStorage에 저장된 게 있는지 확인을 우선 해주고, 저장된 게 없다면 prefers-color-scheme을 확인하시면 됩니다. 상술한 것과 마찬가지로, 스크립트를 User Agent 스타일을 위한 메타 태그사실상 위에서 끝이긴 합니다만, 혹 테마 토글 기능 없이 시스템의 테마를 따르면서 웹사이트를 제작하시려면 추가하시는 게 좋은 메타 태그입니다. <meta name="color-scheme" content="dark light" /> 메타 태그 없음(좌) / 메타 태그 있음(우)CSS는 한
줄도 작성하지 않고 디자인배경색단순히 다크 테마라고 #000을 넣으시면 보기 상당히 이상한 디자인이 탄생해버립니다. 글자색마찬가지로 #fff은 너무 밝을 수 있으니, 정말 강조하고 싶은 문구가 아니라면 피하시는 게 좋습니다. 배경색 #121212를 기준으로, #9f9f9f까지 AAA 레벨을 통과하니 참고해주세요. 올바른 색 고르기보통 다크 테마는 눈을 편하게 하고자 사용하는데, 어두운 배경에 강렬한 색만큼 눈이 피곤한 게 없습니다. ⓒ 2020. Marshall K All rights reserved |