목차
- 상태유지 X (방법1, 방법2)
- 상태유지 O (방법3, 방법4)
상태유지 X (방법1, 방법2)
[방법1] : Light → Dark
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
}
.dark-mode {
background-color: black;
color: white;
}
</style>
<h2>홈짱닷컴</h2>
<p>Homzzang.com</p>
<button onclick="homzzang()">모드 전환</button>
<script>
function homzzang() {
var my = document.body;
my.classList.toggle("dark-mode");
}
</script>
결과보기
[방법2] : Dark → Light
<style>
body.dark {
background-color: #111;
color: #eee;
}
body.dark a {
color: #111;
}
body.dark button {
background-color: #eee;
color: #111;
}
body.light {
background-color: #eee;
color: #111;
}
body.light a {
color: #111;
}
body.light button {
background-color: #111;
color: #eee;
}
</style>
<body id="body" class="dark">
<h1>홈짱닷컴</h1>
<p>Homzzang.com</p>
<button type="button" onclick="homzzang()">
<script>
function homzzang() {
var body = document.getElementById("body");
var currentClass = body.className;
body.className = (currentClass == "dark") ? "light" : "dark";
}
</script>
결과보기
상태유지 O (방법3, 방법4)
[방법3] : 상태 유지 O
다크 모드 JS 이용
https://github.com/nickdeny/darkmode-js
[방법4] : 상태 유지 O - 방법1 업그레이드형
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
}
.dark-mode {
background-color: black;
color: white;
}
</style>
<body>
<h2>홈짱닷컴</h2>
<p>Homzzang.com</p>
<button type="button" onclick="homzzang()">모드 전환</button>
<div id="theme"></div>
<script>
(function() {
let onpageLoad = localStorage.getItem("theme") || "";
let element = document.body;
element.classList.add(onpageLoad);
document.getElementById("theme").textContent =
localStorage.getItem("theme") || "light";
})();
function homzzang() {
let element = document.body;
element.classList.toggle("dark-mode");
let theme = localStorage.getItem("theme");
if (theme && theme === "dark-mode") {
localStorage.setItem("theme", "");
} else {
localStorage.setItem("theme", "dark-mode");
}
document.getElementById("theme").textContent = localStorage.getItem("theme");
}
</script>
</body>
결과보기
