다크 모드 만들기

Bam·2023년 3월 2일
0

Javascript

목록 보기
98/106
post-thumbnail
post-custom-banner

다크 모드🌙

한 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 등을 사용해서 classattribute를 설정해 사용자가 직접 모드를 컨트롤 할 수 있게 하는 방식도 있습니다.

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와 동일하므로 따로 넣진 않겠습니다.

classListsetAttribute() 방식의 차이점❓

classList는 코드가 실행되면 <body class='dark'>와 같이 되고,
setAttribute() 방식은 코드 실행 후 <body color-mode='dark'>가 됩니다.


결론적으로는 편한 것을 사용하되, 사용자 편의성에 맞춰서 직접 모드를 전환하고 싶으면 classList, setAttribute()를 이용하고 환경에만 맞추고 싶다면 prefers-color-scheme를 이용하시면 됩니다.

하지만 결국 좋은 웹 사이트는 사용자가 사용하기 좋아야 하기에 사용자가 직접 모드를 전환할 수 있는 방식이 좋을 것이라고 생각이 되며 글을 마칩니다.

post-custom-banner

0개의 댓글