다크 모드와 라이트 모드 구현: CSS와 JavaScript 활용법

다크 모드는 최근 웹사이트와 앱에서 필수적인 기능으로 자리 잡았습니다. 다크 모드는 눈의 피로를 줄이고, 배터리 사용량을 절약하며, 사용자의 선호도에 맞춘 UI 경험을 제공합니다.

이 글에서는 CSS와 JavaScript를 활용해 다크 모드와 라이트 모드를 구현하는 방법을 설명합니다.

---

1. 다크 모드와 라이트 모드란?

다크 모드(Dark Mode)란?

• 기본적으로 어두운 배경 + 밝은 텍스트 조합을 사용.
• 눈의 피로를 줄이고, OLED 디스플레이에서는 배터리 절약 효과가 있음.

라이트 모드(Light Mode)란?

• 전통적인 밝은 배경과 어두운 텍스트를 사용하는 디자인.
• 대부분의 웹사이트와 앱에서 기본값으로 설정됨.

---

2. CSS만으로 다크 모드 적용하기 (prefers-color-scheme)

1) prefers-color-scheme 사용하기

CSS에서 prefers-color-scheme 미디어 쿼리를 사용하면 사용자의 운영체제(OS) 설정에 따라 다크 모드를 자동 적용할 수 있습니다.

css

/* 기본 라이트 모드 스타일 */
body {
    background-color: white;
    color: black;
}

/* 다크 모드 스타일 */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #121212;
        color: white;
    }
}

✅ 장점

• JavaScript 없이도 자동 적용됨.
• 사용자의 OS 설정을 자동으로 감지하여 UX 개선.

❌ 단점

• 사용자가 수동으로 모드를 변경할 수 없음.
• 브라우저에서 prefers-color-scheme을 지원해야 함.

---

3. JavaScript로 다크 모드 토글 기능 추가하기

1) 기본적인 다크 모드 토글 기능

HTML 버튼을 클릭하면 다크 모드와 라이트 모드를 변경할 수 있도록 구현합니다.

📌 HTML 코드

html

<button id="theme-toggle">🌙 다크 모드</button>

📌 CSS 코드

css

/* 기본 스타일 (라이트 모드) */
body {
    background-color: white;
    color: black;
    transition: background 0.3s, color 0.3s;
}

/* 다크 모드 스타일 */
.dark-mode {
    background-color: #121212;
    color: white;
}

📌 JavaScript 코드

javascript

const themeToggle = document.getElementById("theme-toggle");
const body = document.body;

themeToggle.addEventListener("click", () => {
    body.classList.toggle("dark-mode");

    if (body.classList.contains("dark-mode")) {
        themeToggle.textContent = "☀️ 라이트 모드";
        localStorage.setItem("theme", "dark");
    } else {
        themeToggle.textContent = "🌙 다크 모드";
        localStorage.setItem("theme", "light");
    }
});

// 사용자의 이전 설정 유지 (로컬 스토리지 활용)
if (localStorage.getItem("theme") === "dark") {
    body.classList.add("dark-mode");
    themeToggle.textContent = "☀️ 라이트 모드";
}

✅ 설명

1. 버튼 클릭 시 dark-mode 클래스 추가/제거 → 배경과 텍스트 색상을 변경.
2. 사용자의 선택을 localStorage에 저장 → 페이지 새로고침 후에도 모드 유지.
3. 페이지 로드 시 localStorage 값을 확인하여 이전 설정을 적용.

✅ 장점

• 사용자가 직접 다크 모드와 라이트 모드를 변경 가능.
• localStorage를 사용하여 설정을 유지할 수 있음.

---

4. 다크 모드와 라이트 모드를 자동 감지하여 적용하기

운영체제(OS) 설정을 감지하여 자동으로 다크 모드를 적용하는 기능을 추가할 수 있습니다.

📌 JavaScript 코드 (자동 감지 포함)

javascript

const themeToggle = document.getElementById("theme-toggle");
const body = document.body;

// OS 설정 감지
const prefersDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;

// 저장된 설정 확인
const savedTheme = localStorage.getItem("theme");

if (savedTheme) {
    body.classList.toggle("dark-mode", savedTheme === "dark");
} else {
    body.classList.toggle("dark-mode", prefersDarkMode);
}

// 버튼 텍스트 변경
themeToggle.textContent = body.classList.contains("dark-mode") ? "☀️ 라이트 모드" : "🌙 다크 모드";

// 버튼 클릭 이벤트 추가
themeToggle.addEventListener("click", () => {
    body.classList.toggle("dark-mode");
    const newTheme = body.classList.contains("dark-mode") ? "dark" : "light";
    localStorage.setItem("theme", newTheme);
    themeToggle.textContent = newTheme === "dark" ? "☀️ 라이트 모드" : "🌙 다크 모드";
});

✅ 추가 기능

1. OS의 다크 모드 설정을 감지 (prefers-color-scheme).
2. 사용자가 설정을 변경하면 localStorage에 저장.
3. 페이지 로드 시 OS 설정 또는 저장된 값을 기반으로 자동 적용.

---

5. 다크 모드에서 이미지 변경하기

다크 모드와 라이트 모드에서 다른 이미지를 표시하려면 data-attribute를 활용할 수 있습니다.

📌 HTML 코드

html

<img id="theme-image" src="light-mode.jpg" data-light="light-mode.jpg" data-dark="dark-mode.jpg">

📌 JavaScript 코드

javascript

const themeImage = document.getElementById("theme-image");

function updateImage() {
    themeImage.src = body.classList.contains("dark-mode")
        ? themeImage.dataset.dark
        : themeImage.dataset.light;
}

// 다크 모드 변경 시 이미지 업데이트
themeToggle.addEventListener("click", updateImage);
updateImage(); // 초기 설정 적용

✅ 설명

• 다크 모드에서는 data-dark 속성의 이미지로 변경.
• 라이트 모드에서는 data-light 속성의 이미지로 변경.

---

6. 애니메이션을 추가하여 부드러운 전환 효과 만들기

다크 모드 전환 시 부드러운 애니메이션 효과를 추가하면 더 좋은 사용자 경험을 제공할 수 있습니다.

📌 CSS 코드

css

body {
    transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
}

img {
    transition: opacity 0.3s ease-in-out;
}

✅ 적용 효과

• 다크 모드 전환 시 부드럽게 배경색 변경.
• 이미지 변경 시 깜빡임 방지.

---

결론

✅ CSS만 사용하려면?

• @media (prefers-color-scheme: dark) 미디어 쿼리를 활용.

✅ JavaScript를 사용하려면?

• classList.toggle()을 사용하여 다크 모드를 적용하고 localStorage에 저장.

✅ 자동 감지를 추가하려면?

• window.matchMedia("(prefers-color-scheme: dark)").matches를 활용.

✅ 부드러운 전환을 원한다면?

• CSS transition을 사용하여 자연스럽게 색상이 변경되도록 설정.

---

이제 다크 모드를 웹사이트에 적용하고 사용자에게 더 나은 경험을 제공하세요! 🚀

이 글이 애드센스 승인과 블로그 운영에 도움이 되길 바랍니다. 😊
더 궁금한 점이 있다면 언제든지 질문해주세요! 🚀