prologue
토글버튼으로 다크테마를 적용하는 방법은 매우 다양합니다. 스크립트만으로 짜는 분들도 계시겠지만 저는 스크립트를 최소화하고, CSS를 활용하는 방법으로 만들어보았습니다.
index.html
main 태그와 그 안에 switch로 구성하였습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<main>
<div class="switch">
<span class="btn-toggle"></span>
</div>
</main>
</body>
</html>style.css
스위치와 토글버튼 그리고 레이아웃을 잡아줍니다.
body {
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
}
main {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
transition: background-color .2s;
}
.switch {
display: flex;
border-radius: 50px;
width: 3rem;
padding: .3rem;
background-color: darkslateblue;
transition: background-color .2s;
cursor: pointer;
}
.btn-toggle {
width:20px;
height: 20px;
border-radius: 20px;
background-color: white;
transition: transform .1s;
}
/* Dark Theme */
.dark-theme {
background-color: #333;
}
.dark-theme .switch {
background-color: rgba(255,255,255,.1);
}
.dark-theme .btn-toggle {
transform: translateX(28px);
}script.js
스위치를 클릭할 때마다 main 태그의 class가 토글됩니다.
document.addEventListener('DOMContentLoaded', function () {
const main = document.querySelector('main');
const toggleSwitch = document.querySelector('.switch');
toggleSwitch.addEventListener('click', () => {
main.classList.toggle('dark-theme');
})
});스위치를 누르면 main 태그에 dark-theme이라는 클래스가 생성되면서 css에 입혀놓은 dark-theme이 적용됩니다.
배우고 때때로 익히면 또한 기쁘지 아니한가?