728x90
안녕하세요.
오늘은 다크모드 토글 기능을 구현 해보겠습니다.
index.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>
<div class="container">
<h1>다크모드 토글 예시</h1>
<button id="darkModeToggle">다크모드 토글</button>
</div>
<script src="script.js"></script>
</body>
</html>
styles.css
/* styles.css */
body {
transition: background-color 0.5s, color 0.5s;
}
.container {
text-align: center;
margin-top: 50px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
.light-mode {
background-color: white;
color: black;
}
.dark-mode {
background-color: black;
color: white;
}
JavaScript
// script.js
document.addEventListener('DOMContentLoaded', (event) => {
const toggleButton = document.getElementById('darkModeToggle');
const body = document.body;
const savedMode = localStorage.getItem('darkMode');
if (savedMode) {
body.classList.add(savedMode);
}
toggleButton.addEventListener('click', () => {
if (body.classList.contains('dark-mode')) {
body.classList.remove('dark-mode');
body.classList.add('light-mode');
localStorage.setItem('darkMode', 'light-mode');
} else {
body.classList.remove('light-mode');
body.classList.add('dark-mode');
localStorage.setItem('darkMode', 'dark-mode');
}
});
});
해당 코드를 실행한 결과 입니다.
'JavaScript' 카테고리의 다른 글
| [JavaScript] 드래그 앤 드랍으로 이미지 순서 변경하기 (0) | 2024.08.08 |
|---|---|
| [JavaScript] 마우스 드래그로 캔버스에 네모와 동그라미 그리기 (0) | 2024.08.06 |
| [Javascript] dad joke 만들기 (0) | 2024.06.28 |
| [Javascript] stripe만들기 (0) | 2024.06.23 |
| [Javascript] wikipedia 데이터 가져오기 (2) | 2024.06.19 |