페이지의 텍스트 색상(color)과 배경색(background-color)을 변경하는 것만으로 웹사이트에 다크 모드와 라이트 모드를 손쉽게 추가할 수 있습니다. 여기에 간단한 JavaScript를 더하면 버튼 클릭 한 번으로 두 가지 테마를 자유롭게 전환하는 기능을 만들 수 있습니다.
기본 문법
다음과 같은 CSS 문법을 사용해 다크 모드 스타일을 정의할 수 있습니다.
Selector {
color: white;
background-color: black
}
동작 원리
이 기능의 핵심은 classList.toggle() 메서드입니다. 버튼을 클릭하면 document.body 요소에 .dark 클래스가 추가되거나 제거되고, 이에 따라 CSS에 정의된 어두운 테마가 적용되거나 해제됩니다. 동시에 버튼의 라벨 텍스트도 현재 모드에 맞게 변경되어 사용자에게 현재 상태를 직관적으로 알려줍니다.
예제 1: 텍스트 콘텐츠가 있는 페이지
버튼을 클릭하면 본문 전체의 텍스트 색상과 배경색이 반전되는 기본적인 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
font-size: 1.4em;
text-align: center;
}
.dark {
color: white;
background-color: black;
}
</style>
</head>
<body>
<div>
<p>Suspendisse eget finibus nulla, a pulvinar est. Suspendisse eget eleifend nibh. In nec massa molestie, vehicula sapien a, consectetur nunc. Aenean at nisl vulputate mi scelerisque commodo nec et mauris. Duis tincidunt auctor posuere.</p>
<button id="btn" onclick="change()">Normal Mode</button>
</div>
<script>
let btnText = document.getElementById("btn");
function change() {
let btn = document.body;
btn.classList.toggle("dark");
if (btnText.innerHTML === "Normal Mode") {
btnText.innerHTML = "Dark Mode!";
} else {
btnText.innerHTML = "Normal Mode";
}}
</script>
</body>
</html>
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
예제 2: 이미지가 포함된 페이지
이번에는 이미지가 포함된 페이지에 동일한 방식으로 다크 모드를 적용한 예제입니다. 텍스트뿐 아니라 이미지가 있는 레이아웃에서도 같은 원리로 테마 전환이 가능합니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
font-size: 1.4em;
text-align: center;
}
.dark {
color: white;
background-color: black;
}
</style>
</head>
<body>
<div>
<button id="btn" onclick="change()">Normal Mode</button>
<p>Duis tincidunt auctor posuere.</p>
<img src="https://images.unsplash.com/photo-1610718055968-4e3cf23d96db?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=200" />
</div>
<script>
let btnText = document.getElementById("btn");
function change() {
let btn = document.body;
btn.classList.toggle("dark");
if (btnText.innerHTML === "Normal Mode") {
btnText.innerHTML = "Dark Mode!";
} else {
btnText.innerHTML = "Normal Mode";
}}
</script>
</body>
</html>
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
추가 팁
실제 서비스에서는 CSS의 prefers-color-scheme 미디어 쿼리를 함께 활용하면 운영체제나 브라우저의 테마 설정에 따라 다크 모드가 자동으로 적용되도록 만들 수 있습니다. 또한 localStorage에 사용자의 선택을 저장해 두면 다음 방문 시에도 선호하는 테마가 그대로 유지되어 더 나은 사용자 경험을 제공할 수 있습니다.