다크 모드를 토글하는 HTML 코드를 제공합니다. 이 코드는 초보자도 이해하기 쉽도록 주석이 추가되어 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>다크 모드 토글</title>
<style>
/* 다크 모드 스타일 */
.dark-mode {
background-color: black;
color: white;
}
</style>
</head>
<body>
<h1>다크 모드 토글</h1>
<!-- 다크 모드 토글 버튼 -->
<button onclick="toggleDarkMode()">다크 모드 토글</button>
<!-- 페이지 내용 -->
<p>이것은 다크 모드를 토글하는 페이지입니다.</p>
<script>
// 다크 모드 토글 함수
function toggleDarkMode() {
var body = document.body;
// 현재 상태 확인
var isDarkMode = body.classList.contains("dark-mode");
// 상태 변경
if (isDarkMode) {
body.classList.remove("dark-mode");
} else {
body.classList.add("dark-mode");
}
}
</script>
</body>
</html>
'HTML 예제' 카테고리의 다른 글
| 간단한 게시판 형식 (0) | 2023.12.07 |
|---|---|
| 날짜 및 시간 표시 (0) | 2023.12.07 |
| 사용자 위치 표시 (0) | 2023.12.07 |
| 동적으로 목록 추가 (0) | 2023.12.07 |
| 화면 알림 뛰우기 (0) | 2023.12.07 |
