JavaScript를 사용하면 몇 줄의 코드만으로 다크 모드와 라이트 모드를 자유롭게 전환할 수 있습니다. 핵심 원리는 버튼 클릭 시 document.body 요소에 미리 정의해 둔 CSS 클래스를 추가하거나 제거하는 것입니다. 아래 예제를 통해 그 구현 과정을 자세히 살펴보겠습니다.
핵심 동작 원리
이 기능은 크게 세 단계로 구성됩니다.
- 기본 스타일 정의: 라이트 모드(흰색 배경, 검은색 글자)를 body의 기본 스타일로 지정합니다.
- 다크 모드 클래스 작성:
.dark-mode클래스에 검은색 배경과 흰색 글자 스타일을 정의합니다. - 클래스 토글 처리: 버튼 클릭 이벤트 발생 시
classList.toggle()메서드로 클래스를 추가하거나 제거합니다.
전체 예제 코드
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.dark-mode {
background-color: black;
color: white;
}
.toggleButton {
padding: 12px;
font-size: 18px;
border: 2px solid green;
}
</style>
</head>
<body>
<h1>Toggle Dark/Light Mode Example</h1>
<button class="toggleButton">Toggle dark mode</button>
<h2>Click the above button to toggle dark mode</h2>
<script>
document.querySelector(".toggleButton").addEventListener("click", toggleDarkMode);
function toggleDarkMode() {
var element = document.body;
element.classList.toggle("dark-mode");
}
</script>
</body>
</html>
코드 상세 설명
- body 기본 스타일: 패딩 25px, 흰색 배경, 검은색 글자 등 라이트 모드의 기본값을 설정합니다.
- .dark-mode 클래스: 배경색을 검정으로, 글자색을 흰색으로 변경하여 다크 모드 화면을 구현합니다.
- classList.toggle("dark-mode"): 호출될 때마다 해당 클래스가 없으면 추가하고, 이미 있으면 제거합니다. 덕분에 별도의 조건문 없이도 깔끔하게 토글 기능을 완성할 수 있습니다.
실행 결과
위 코드를 브라우저에서 실행하면 다음과 같은 초기 화면(라이트 모드)이 표시됩니다.
“Toggle dark mode” 버튼을 클릭하면 아래와 같이 화면 전체가 다크 모드로 전환됩니다.
실무 활용 팁
실제 서비스에 적용할 때는 다음 사항을 함께 고려하면 완성도를 높일 수 있습니다.
- 설정 저장:
localStorage에 사용자의 모드 선택을 저장하면 페이지를 새로고침해도 설정이 유지됩니다. - 시스템 설정 연동: CSS의
@media (prefers-color-scheme: dark)를 활용하면 운영체제 테마 설정에 따라 자동으로 다크 모드를 적용할 수 있습니다. - 부드러운 전환 효과:
transition속성을 추가하면 색상이 자연스럽게 변화하여 더 세련된 사용자 경험을 제공합니다.