테마 선택 저장하기

Coddy HTML 여정의 JavaScript in Action 섹션에 포함된 레슨 — 27개 중 17번째.

사용자가 라이트 테마와 다크 테마 사이를 전환할 때, 웹사이트가 그들의 선택을 기억하도록 하고 싶습니다.
이를 위해 JavaScript의 <strong>localStorage</strong>를 사용합니다. 이는 브라우저에 데이터를 저장하며, 이 데이터는 페이지를 새로고침하거나 브라우저를 닫은 후에도 유지됩니다.

로직은 다음과 같습니다:

사용자가 테마를 전환할 때, 현재 테마를 localStorage에 저장합니다.
페이지가 로드될 때, localStorage를 확인하고 저장된 테마를 자동으로 적용합니다.

HTML:

<button id="themeToggle">Toggle Theme</button>

CSS:

body.dark-mode {
  background-color: #222;
  color: #fff;
}

이 코드는 사용자가 이전에 localStorage에 다크 테마를 저장했는지 확인하고, 페이지가 로드될 때 이를 적용합니다.

버튼을 클릭하면 페이지의 다크 모드를 토글하고, localStorage를 업데이트하여 다음 방문 시에도 기본 설정이 기억되도록 합니다.

const button = document.getElementById("themeToggle");

// 페이지 로드 시 저장된 테마 적용
if (localStorage.getItem("theme") === "dark") {
  document.body.classList.add("dark-mode");
}

button.addEventListener("click", function () {
  document.body.classList.toggle("dark-mode");

  // 기본 설정 저장
  if (document.body.classList.contains("dark-mode")) {
    localStorage.setItem("theme", "dark");
  } else {
    localStorage.setItem("theme", "light");
  }
});

이것은 사용자가 사이트를 다시 방문하더라도 설정이 유지되도록 보장합니다.

챌린지

쉬움

사용자 설정을 기억하는 테마 토글을 만드세요.

단계:

페이지 로드 시: 사용자가 이전에 다크 모드를 선택했는지 확인합니다.
1. localStorage에 "dark"가 저장되어 있다면, body에 "dark-mode" 클래스를 추가합니다.
토글 버튼을 클릭할 때: 라이트 테마와 다크 테마 사이를 전환합니다.
1. body 요소에서 "dark-mode" 클래스를 토글합니다.
2. 현재 테마를 localStorage에 저장합니다.

직접 해보기

<!DOCTYPE html>
<html>
<head>
  <title>Theme Preference Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <button id="themeToggle">Toggle Theme</button>

  <h1>Saving Theme Preference</h1>
  <p>
    Try switching between light and dark mode using the button above.  
    Refresh the page — your choice is remembered thanks to <strong>localStorage</strong>.
  </p>
  <script src="script.js"></script>
</body>
</html>