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