HTML／CSS

[HTML/CSS] 다크모드 구현하기

teamnova 2024. 1. 20. 12:59
728x90

안녕하세요 이번 게시글에서는 html, css, js 를 이용해 다크모드 기능 구현방법에 대해 설명하겠습니다. 

우선 시연영상입니다. 

 

 

다음은 전체 코드입니다.

darkmode.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>다크 모드 토글</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <button id="dark-mode-toggle">다크 모드 토글</button>
    <div class="content">
      <h1>다크 모드 테스트</h1>
      <p>이것은 다크 모드 테스트입니다.</p>
    </div>
    <script src="script.js"></script>
  </body>
</html>

 

script.js

const darkModeToggle = document.getElementById("dark-mode-toggle");
const content = document.querySelector(".content");

darkModeToggle.addEventListener("click", () => {
  // body 요소에 dark-mode 클래스를 추가 또는 제거하여 스타일을 변경합니다.
  document.body.classList.toggle("dark-mode");

  // content 요소의 스타일도 변경합니다.
  content.classList.toggle("dark-mode");

  // 로컬 스토리지에 다크 모드 상태를 저장합니다.
  if (document.body.classList.contains("dark-mode")) {
    localStorage.setItem("darkMode", "enabled");
  } else {
    localStorage.setItem("darkMode", "disabled");
  }
});

// 페이지가 로드될 때, 로컬 스토리지에서 다크 모드 상태를 확인하고 적용합니다.
window.addEventListener("load", () => {
  const darkModeStatus = localStorage.getItem("darkMode");
  if (darkModeStatus === "enabled") {
    document.body.classList.add("dark-mode");
    content.classList.add("dark-mode");
  }
});

 

styles.css

/* 일반 스타일 */
body {
  background-color: #ffffff;
  color: #000000;
  transition: background-color 0.3s, color 0.3s;
}

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