<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.light{
background-color: white;
}
.dark {
background-color: black;
}
</style>
<title>Document</title>
</head>
<body>
<button id="themeButton">모드 변경</button>
<script>
// body의 배경을 흰색 검은색
// style, class
// 변경 버튼 누르면 흰색 검은색 토글
// 이벤트 리스너
document.querySelector("#themeButton").addEventListener("click", ()=>{
if (document.body.classList.contains("dark")) {
document.body.classList.remove("light");
document.body.classList.remove("dark");
document.body.classList.add("light");
localStorage.setItem("theme", "light");
} else {
document.body.classList.remove("light");
document.body.classList.remove("dark");
document.body.classList.add("dark");
localStorage.setItem("theme", "dark");
}
})
// 새로고침해도 색이 유지되어야 한다
// 로컬 스토리지
const setBackColor = () => {
if (localStorage.getItem("theme") === "dark") {
document.body.classList.add("dark");
} else {
document.body.classList.add("light");
}
};
setBackColor();
</script>
</body>
</html>
새로고침해도 다크모드 유지