이코노트허브(econotehub) 노하우 연구소

밤에 스마트폰으로 블로그 글을 읽다가 하얀 화면 때문에 눈이 부셨던 경험, 다들 있으실 겁니다. 요즘은 많은 웹사이트와 앱이 다크모드를 지원하는데, 사실 블로그에도 CSS 몇 줄이면 어렵지 않게 적용할 수 있습니다.

다크모드, 두 가지 방식이 있어요

다크모드를 구현하는 방법은 크게 두 가지입니다.

자동 감지 방식: 방문자의 기기 설정(시스템 다크모드)을 그대로 따라가는 방식. 코드가 간단합니다.
버튼 전환 방식: 블로그에 토글 버튼을 만들어서 방문자가 직접 켜고 끄는 방식. 좀 더 세밀한 제어가 가능하지만 자바스크립트가 필요합니다.

오늘은 코드 3줄로 시작할 수 있는 자동 감지 방식부터 알아보고, 버튼 전환 방식도 함께 다뤄보겠습니다.

지난번 배운 미디어 쿼리와 똑같은 문법을 씁니다. 다만 화면 크기 대신 prefers-color-scheme이라는 조건을 사용합니다.

@media (prefers-color-scheme: dark) {
  body {
    background-color: #1a1a1a;
    color: #e0e0e0;
  }
}

방문자의 스마트폰이나 PC가 다크모드로 설정되어 있으면, 이 CSS가 자동으로 적용됩니다. 별도의 버튼이나 자바스크립트 없이 이 코드만 <style> 태그 안에 추가하면 끝입니다.

방문자가 원할 때 직접 켜고 끄고 싶다면, 버튼과 약간의 자바스크립트가 필요합니다.

<button onclick="document.body.classList.toggle('dark-mode')">
  다크모드 전환
</button>

.dark-mode {
  background-color: #1a1a1a;
  color: #e0e0e0;
}

.dark-mode a {
  color: #8ab4f8;
}

버튼을 클릭할 때마다 body 태그에 dark-mode라는 클래스가 붙었다 떨어졌다 하면서 스타일이 전환됩니다. classList.toggle()은 "있으면 빼고, 없으면 붙이는" 자바스크립트 명령어입니다.

다크모드를 만들 때 배경을 무조건 검정(#000000)으로 하면 오히려 눈이 더 피로할 수 있습니다. 아래 조합을 참고하세요.

배경: #1a1a1a (완전 검정보다 부드러운 짙은 회색)
글자: #e0e0e0 (완전 흰색보다 부드러운 밝은 회색)
링크: #8ab4f8 (구글이 다크모드에서 사용하는 파란색 계열)

완전한 흰색과 완전한 검정의 대비가 너무 강하면 눈의 피로도가 오히려 올라간다는 점, 기억해두시면 좋습니다.

이미지 배경까지 어둡게 바꾸는 경우: 사진이나 스크린샷 이미지는 다크모드에서도 원래 색 그대로 두는 게 자연스럽습니다. img 태그에는 배경색 스타일을 적용하지 마세요.
링크 색상을 안 바꾸는 경우: 기본 파란색 링크는 어두운 배경에서 잘 안 보일 수 있습니다. 위 예제처럼 링크 색상도 함께 조정해야 합니다.
버튼 전환 방식에서 새로고침하면 원상복구되는 문제: classList.toggle()만 쓰면 페이지를 새로고침할 때마다 라이트모드로 돌아갑니다. 설정을 기억하게 하려면 브라우저 저장 기능이 추가로 필요한데, 이 부분은 난이도가 있으니 다음에 별도로 다뤄보겠습니다.

여러분의 블로그, 밤에 읽는 독자를 위해 다크모드 한번 적용해보시는 건 어떨까요?