반응형
Lots of applications, nowadays, have a feature to change day and night modes. Let’s see how to make one using HTML, CSS, JS.
This feature is quite straight forward so I am going to explain why to implement of what it does. Having said that let’s get into the code. (I tried to omit the unnecessary codes)
Implementation
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
/* html에 전역변수 지정 */
: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')
}
})Then we can add or remove the attribute using the click event on the toggle button.
In this writing, we have gone through how to implement a day/night mode feature using Vanilla JavsScritp.
728x90
반응형
'Frontend > JavaScript' 카테고리의 다른 글
| Webpack (1) | 2023.03.29 |
|---|---|
| Data Request (1) | 2023.03.24 |
| How to Tell PC from Mobile in A Responsive APP (1) | 2023.03.23 |
| Modal (0) | 2023.03.14 |
| Infinite Scrolling (0) | 2023.03.14 |
