한 4년?정도 전 부터 유명한 브라우저나 페이지, 어플리케이션에 항상 들어가있는 기능이 하나가 있습니다. 그 기능은 바로 다크 모드
입니다.
다크 모드
란, 기존엔 애플리케이션의 표시를 보통 흰색 바탕에 검은 글씨로 나타냈었는데 그러한 디자인을 반전시켜 어두운 배경에 흰색 글씨로 표시하는 모드를 의미합니다. 사람마다 선호하는 모드는 다르겠지만 꽤 많은 사람들이 다크 모드를 사용하고 있다고 할 수 있습니다.
개인적인 경험으로는 검정색(#000000)보다는 짙은 회색계열의 다크 모드를 사용하는 페이지가 더 좋았습니다. 완벽한 검정의 경우에는 오히려 대비색 등으로 인해 오히려 눈이 더 아픈듯한 느낌을 받았습니다.
아무튼, 웹에선 이러한 다크 모드를 어떻게 구현할 수 있는지에 대한 두 가지 방법을 알아보도록 하겠습니다.
prefers-color-scheme
방식은 CSS에서 지원하는 미디어 쿼리
입니다. 사용중인 운영체제의 모드 정보에 맞춰서 라이트/다크 모드를 비교적 쉽게 제작할 수 있게 해줍니다. 미디어 쿼리의 사용법은 다음과 같습니다.
@media (prefers-color-scheme: light) {
/*
라이트 모드에서의 CSS
*/
}
@media (prefers-color-scheme: dark) {
/*
다크 모드에서의 CSS
*/
}
해당 미디어 쿼리에서 모드가 라이트인지 다크인지 확인하고, 해당 모드에 적용되는 CSS를 적용시켜줍니다. 이 기능은 다크 모드가 유행을 넘어 반필수적인 요소로 자리잡은 만큼 IE를 제외한 모든 브라우저에서 작동합니다.
prefers-color-scheme
방식은 제작하기 편리하지만, 사용자가 웹에서 사용하고 싶은 모드를 직접 결정할 수는 없습니다. 저도 velog, 네이버, 구글은 라이트 모드를 사용하고, GitHub, Youtube에서는 다크 모드를 사용하는 방식으로 웹 페이지마다 선호하는 모드가 다릅니다. 이럴 경우 선택권 없이 모드에 맞춰서 적용되어 있다면 편리하다고만은 할 수 없겠죠?
그래서 이런 경우를 위해 toggle
, button
등을 사용해서 class
나 attribute
를 설정해 사용자가 직접 모드를 컨트롤 할 수 있게 하는 방식도 있습니다.
class
를 이용하는 방식은 요소에 class 속성값을 이용하는 방식입니다. 클래스 셀렉터
를 이용해서 다크 모드에 대한 디자인을 적용시킬 수 있습니다.
자바스크립트에서 classList
프로퍼티를 이용해서 class
속성에 다크 모드를 인식시킬 수 있는 클래스 속성값을 넣고 CSS를 조작하는 방식입니다.
<p>다크 모드</p>
<button id='mode-toggle-button'>모드 전환</button>
body.dark {
background: #000000;
}
body.dark p {
color: #EDEDED;
}
document.getElementById('mode-toggle-button').addEventListener('click', () => {
document.body.classList.add('dark');
});
클릭 전 클릭 후
setAttribute()
함수를 이용하는 방식은 앞선 classList
프로퍼티 처럼 Attribute를 삽입해서 다크 모드를 전환 하는 방식입니다. 사용 방식도 classList
방식과 유사합니다'.
<p>다크 모드</p>
<button id='mode-toggle-button'>모드 전환</button>
body[color-mode='dark'] {
background: #000000;
}
body[color-mode='dark'] p {
color: #EDEDED;
}
document.getElementById('mode-toggle-button').addEventListener('click', () => {
document.body.setAttribute('color-mode', 'dark');
});
결과는 classList
와 동일하므로 따로 넣진 않겠습니다.
❓
classList
와setAttribute()
방식의 차이점❓
classList
는 코드가 실행되면<body class='dark'>
와 같이 되고,
setAttribute()
방식은 코드 실행 후<body color-mode='dark'>
가 됩니다.
결론적으로는 편한 것을 사용하되, 사용자 편의성에 맞춰서 직접 모드를 전환하고 싶으면 classList, setAttribute()
를 이용하고 환경에만 맞추고 싶다면 prefers-color-scheme
를 이용하시면 됩니다.
하지만 결국 좋은 웹 사이트는 사용자가 사용하기 좋아야 하기에 사용자가 직접 모드를 전환할 수 있는 방식이 좋을 것이라고 생각이 되며 글을 마칩니다.