홈페이지에 다크모드 만드는 법 — 토글 버튼 하나로 완성하기

🌑 요즘 사이트엔 다크모드가 기본이다

유튜브, 노션, 깃허브. 요즘 잘 만든 사이트들은 대부분 다크모드를 지원한다. 밤에 화면을 볼 때 눈이 덜 아프고, 디자인이 세련돼 보인다는 것도 이유지만, 진짜 이유는 간단하다. 사용자가 원하기 때문이다.

직접 만들어봤다. 생각보다 어렵지 않다. 🌙 버튼 하나와 CSS 몇 줄이면 된다. 뚝딱닷컴도 기본값이 다크모드로 설정되어 있고, 이 글을 보고 있는 지금도 다크모드로 열려 있을 가능성이 높다.

💡

이 글은 이미 HTML + CSS 파일이 있는 분들을 위한 가이드예요. 아직 사이트가 없다면 뚝딱닷컴 교재에서 먼저 만들어 오세요.

🖥️ 다크모드가 뭔가요?

단순히 말하면 배경이 어두운 색으로 바뀌고, 텍스트가 밝아지는 것이다. 흰 배경에 검은 글씨 대신, 어두운 배경에 밝은 글씨로 전환된다.

눈의 피로 감소 — 밤이나 어두운 환경에서 강한 흰 빛이 줄어든다
배터리 절약 — OLED 화면에서 검은 픽셀은 전력을 거의 쓰지 않는다
디자인 분위기 전환 — 같은 사이트도 다크모드에서 훨씬 세련돼 보인다
사용자 선택권 — 취향에 맞게 직접 전환할 수 있다

⚙️ 작동 원리

구조는 아주 단순하다. 🌙 버튼을 클릭하면 body 태그에 dark라는 클래스가 붙는다. CSS는 body.dark일 때만 적용되는 색상 규칙을 갖고 있어서, 클래스 하나로 전체 색상이 바뀐다. 그리고 그 선택을 localStorage에 저장해두면 새로고침해도 상태가 유지된다.

🌙

버튼 클릭

→

🏷️

body에
dark 클래스 추가

→

🎨

CSS
색상 전환

→

💾

localStorage
저장

→

🔄

새로고침 후
설정 유지

JavaScript는 이 흐름만 처리하면 된다. 복잡한 라이브러리가 전혀 필요 없다. 순수 HTML + CSS + JavaScript만으로 완성된다.

🪜 만드는 순서

네 단계면 끝난다.

CSS에 다크모드 색상 규칙 추가 기존 색상 아래에 body.dark 선택자로 시작하는 다크모드 전용 색상을 정의한다. 배경색, 텍스트색, 카드 색상 등 바뀌어야 할 것들을 모두 덮어쓴다.

토글 버튼 HTML 추가 네비게이션 안에 버튼 하나를 넣는다. 🌙 이모지를 버튼 텍스트로 쓰면 별도 이미지 없이도 깔끔하게 표현된다.

JavaScript로 클릭 이벤트 처리 버튼 클릭 시 body.classList.toggle('dark')로 클래스를 켜고 끈다. 동시에 버튼 이모지도 ☀️ ↔ 🌙로 바꿔준다.

localStorage에 저장 현재 다크모드 상태를 localStorage.setItem('darkMode', '1')로 저장한다. 페이지가 로드될 때 저장된 값을 읽어서 자동으로 복원한다.

🤖

AI에게 "다크모드 토글 버튼 추가해줘. 기본값은 다크모드로 해줘"라고 하면 CSS, HTML, JavaScript 코드를 한 번에 작성해준다. 직접 짤 필요 없이 AI가 다 해준다.

핵심 JavaScript 구조
function applyDark(on) {
  body.classList.toggle('dark', on);
  toggle.textContent = on ? '☀️' : '🌙';
}

/* 페이지 로드 시 저장값 복원 */
applyDark(localStorage.getItem('darkMode') !== '0');

toggle.addEventListener('click', function () {
  const on = !body.classList.contains('dark');
  applyDark(on);
  localStorage.setItem('darkMode', on ? '1' : '0');
});

🌑 기본값을 다크모드로 설정하는 법

뚝딱닷컴은 처음 방문하면 다크모드로 시작한다. 비결은 localStorage 판별 방식에 있다. localStorage.getItem('darkMode') !== '0'로 조건을 걸면, 저장된 값이 없을 때도 다크모드가 켜진다.

기본값 다크모드 설정 방법
/* darkMode 값이 없거나 '1'이면 다크모드 ON
   사용자가 직접 끈 경우만 '0'이 저장됨 */
applyDark(localStorage.getItem('darkMode') !== '0');

반대로 기본값을 라이트모드로 하고 싶다면 조건을 뒤집으면 된다. localStorage.getItem('darkMode') === '1'로 바꾸면 저장된 값이 없을 때는 라이트모드로 시작한다.

📄 모든 페이지에 적용하는 법

파일이 하나라면 바로 적용되지만, 사이트가 커지면 HTML 파일이 여러 개가 된다. 뚝딱닷컴도 blog.html, textbook.html, about.html 등 24개 파일이 있다.

이럴 때는 AI한테 한 번에 맡기면 된다. "모든 HTML 파일에 다크모드 추가해줘. 기존 다크모드 CSS 규칙을 참고해서 각 파일에 맞게 적용해줘"라고 요청하면 파일 하나씩 순서대로 수정해준다.

⏱️

뚝딱닷컴 기준으로 24개 파일에 다크모드를 적용하는 데 13분이 걸렸다. 파일 수가 많을수록 시간이 걸리지만, 직접 하는 것보다는 압도적으로 빠르다.

단, 파일마다 구조가 조금씩 다르기 때문에 AI가 실수할 수도 있다. 적용 후에는 각 페이지를 직접 열어서 다크모드가 제대로 동작하는지 확인하는 게 좋다.

⚠️ 주의할 점

다크모드로 전환했는데 일부 요소가 안 바뀌어요

HTML 태그에 인라인 스타일로 색상이 고정된 경우다. 예를 들어 style="color: #333"처럼 직접 색을 지정해두면 body.dark CSS 규칙으로 덮어쓸 수 없다. 발견하면 AI에게 "이 요소 다크모드에서도 바뀌게 수정해줘"라고 하면 된다. 인라인 스타일을 CSS 클래스로 옮기면 해결된다.

이미지가 다크모드에서 너무 밝게 보여요

CSS로 이미지 밝기를 살짝 낮출 수 있다. body.dark img { filter: brightness(0.88); }를 추가하면 다크모드에서 이미지가 조금 어둡게 보정된다. 취향에 따라 수치를 조절하면 된다.

페이지를 처음 열 때 잠깐 라이트모드가 보였다가 다크모드로 바뀌어요

FOUC(Flash Of Unstyled Content) 현상이다. JavaScript가 실행되기 전에 기본 CSS가 먼저 렌더링되어 생기는 문제다. 해결하려면 다크모드 적용 스크립트를 <head> 안에 넣어서 렌더링 전에 먼저 실행되게 하면 된다. AI에게 "다크모드 깜빡임 없애줘"라고 하면 위치를 잡아준다.

✅ 마무리 — 이름 붙이면 내 사이트 기능이 된다

다크모드 하나로 사이트 분위기가 완전히 달라진다. 기술적으로는 CSS 색상 변경에 불과하지만, 방문자가 느끼는 완성도는 꽤 다르다. 직접 🌙 버튼을 눌러봤을 때의 그 기분이란.

구현 자체는 어렵지 않으니 겁먹지 않아도 된다. AI한테 "다크모드 추가해줘"라고 한마디만 하면 CSS부터 JavaScript까지 전부 작성해준다. 남은 건 각 페이지에서 제대로 작동하는지 확인하는 것뿐이다.

뚝딱닷컴 교재에서 다크모드 전체 코드와 함께 단계별 실습을 따라할 수 있다.

이 글이 도움이 됐나요?

다크모드 코드와 전체 실습이 담긴 교재가 무료로 제공되고 있어요.

📖 뚝딱닷컴 교재 전체 보기