안녕하세요 이번 게시글에서는 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;
}'HTML／CSS' 카테고리의 다른 글
| [HTML/CSS] 세로 드롭다운 메뉴 (0) | 2024.02.06 |
|---|---|
| [HTML/CSS] 버튼 클릭시 나오는 모달창 구현하기 (0) | 2024.01.29 |
| [HTML/CSS] tailwind를 사용해서 간단한 todo 리스트 만들기 (0) | 2024.01.16 |
| [HTML/CSS] Tooltip 구현하기 (0) | 2024.01.11 |
| [HTML/CSS] Bowser 라이브러리를 통해 오페라 브라우저인 경우 css 스타일 바꾸기 (0) | 2024.01.07 |