반응형
기본적인 코드로만 구현한 다크모드
다크모드 토글 버튼을 누를 때마다 로컬스토리지에 현재 모드를 저장해서 불러오는 코드 입니다.
css는 일반, 다크모드 따로 분리해서 파일로 만들어주면 조금 더 쉽게 만들 수 있습니다.
예제)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery로 다크 모드 구현</title>
<style>
/* 기본 모드 (라이트 모드) */
body {
background-color: white;
color: black;
transition: background-color 0.3s, color 0.3s;
}
/* 다크 모드 */
body.dark-mode {
background-color: #333;
color: white;
}
</style>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>다크 모드 예제</h1>
<button id="toggleButton">다크 모드 토글</button>
<script>
$(document).ready(function() {
// 페이지 로드 시 로컬 스토리지에서 테마 확인
if (localStorage.getItem('theme') === 'dark') {
$('body').addClass('dark-mode');
}
// 다크 모드 토글 버튼 클릭 이벤트
$('#toggleButton').on('click', function() {
$('body').toggleClass('dark-mode');
// 다크 모드 상태 저장
if ($('body').hasClass('dark-mode')) {
localStorage.setItem('theme', 'dark');
} else {
localStorage.setItem('theme', 'light');
}
});
});
</script>
</body>
</html>
반응형
'자바스크립트&jQuery' 카테고리의 다른 글
| jQuery 체크박스 제어 [체크, 해제, 전체선택] (0) | 2024.11.19 |
|---|---|
| Textarea 에 최대 글자 수 남은 글자 수 출력 (0) | 2024.11.16 |
| 로컬스토리지 사용방법: 저장, 수정, 삭제 (0) | 2024.11.12 |
| 자바스크립트로 각자리 숫자 합계 구하기 (0) | 2014.01.24 |
| jquery scrollTop(), position() (0) | 2011.10.27 |
