반응형
요즘 많은 웹 애플리케이션 야간, 주간 모드로 바꿀 수 있는 기능을 제공하는데요. HTML, CSS, JS를 사용하여 구현해 보겠습니다.
보편적인 기능이라 따로 도입하는 이유에 대한 별다른 설명은 생략하고 바로 코드를 보도록 하겠습니다 (해당 코드에 집중하기 위해 이해를 위해 필요한 코드만 작성)
구현하기
HTML
<body id="top">
<!-- Nav -->
<nav>
<div class="mode">
<i class="fas fa-sun"></i>
<label>
<input id="toggle" type="checkbox">
<span class="toggle-circle"></span>
</label>
</div>
</nav>
<!-- Home -->
<section id="home">
<h1>Custom</h1>
<h2>welcome</h2>
</section>
</body>
CSS
/* 전역변수 지정 */
:root {
--bg-light-alt: rgba(0, 0, 0, 0.4);
--font-primary: aliceblue;
--font-alt: #000;
--bg-primary: transparent;
--btn-primary: rgb(255, 92, 92);
--btn-secondary: #03dac5;
}
/* data-theme='dark' 속성이 존재 할 때 야간 모드로 바꾸어 줌 */
[data-theme='dark'] {
--bg-light-alt: rgba(0, 0, 0, 1);
--font-primary: rgb(218, 58, 250);
--font-alt: rgb(218, 58, 250);
--bg-primary: rgba(0 0 0 /90%);
--btn-primary: rgb(150, 64, 255);
--btn-secondary: #1b9999;
}
body {
color: var(--on-background);
font-family: 'Comfortaa';
background-color: var(--background);
}
nav {
height: 100px;
background-color: var(--bg-light-alt);
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px;
}
h1 {
font-size: 100px;
font-family: Kaushan Script;
text-align: center;
color: var(--font-alt);
}
h2 {
font-size: 40px;
text-align: center;
color: var(--font-alt);
}
/* mode */
.mode {
display: flex;
align-items: center;
color: var(--font-primary);
font-size: 1.2rem;
}
.mode span {
margin-right: 5px;
}
.mode .fas {
margin: 0 20px;
transform: scale(1.6);
}
/* toggle */
label {
height: 30px;
width: 60px;
border-radius: 30px;
}
input {
display: none;
}
input:checked + span {
background-color: gray;
}
input:checked + span::before {
left: 30px;
}
.toggle-circle {
height: 100%;
width: 100%;
display: block;
border-radius: 30px;
transition: 0.4s ease;
border: 1px solid black;
position: relative;
}
.toggle-circle::before {
content: '';
position: absolute;
left: 0;
height: 28px;
width: 28px;
display: block;
border-radius: 50%;
background-color: aliceblue;
transition: 0.4s ease;
}구현을 위해 전역 변수를 사용하는 방법을 선택했는데요. 상단에 첫 번째 코드 블록에서 root (html)에 전역 변수로 기본 색상을 지정하고 그다음 코드에서 root에 속성을 설정하고 여기에 야간모드에서 사용할 색상을 지정해 줍니다.
JS
const toggle = document.getElementById('toggle')
toggle.addEventListener('change', () => {
if (toggle.checked) {
document.documentElement.setAttribute('data-theme', 'dark')
} else {
document.documentElement.removeAttribute('data-theme')
}
})자바스크립트에서 토글 버튼의 클릭 이벤트로 html에 CSS에서 지정한 속성을 추가하고 지워주면 됩니다.
이상으로 자바스크립트를 활용하여 주, 야간 모드를 변경하는 기능을 구현해 보았습니다.
728x90
반응형
'프론트엔드 > 자바스크립트' 카테고리의 다른 글
| 웹팩 (webpack) (0) | 2022.12.21 |
|---|---|
| Declarative Code VS Imperative Code (0) | 2022.12.21 |
| 데이터 요청 (0) | 2022.12.17 |
| 모달 (Modal) (0) | 2022.12.12 |
| 무한스크롤 (infinite scrolling) (0) | 2022.12.02 |
