어둡고 밝은 테마 토글러 + YT 채널

8832 단어 htmljavascriptcsswebdev

이 기사에서는 Pure HTML, CSS 및 JavaScript를 사용하여 DARK 및 LIGHT THEME TOGGLER를 만드는 방법에 대해 설명합니다.




먼저 index.html, style.css 및 script.js의 세 파일을 만듭니다.

이제 이 HTML 코드를 index.html에 붙여넣으십시오.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dark & Light Theme Toggler</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>
        <input type="checkbox" class="checkbox" id="inp">
        <label class="label" for="inp">
            <div class="ball"></div>
        </label>
    </div>
</body>
<script src="script.js"></script>
</html>


이제 스타일링과 모든 것을 할 시간입니다. 이제 CSS를 작성하고 이 코드를 style.css에 붙여넣습니다.

* {
    box-sizing: border-box;
}

body {
    background-color: #fafafa;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
    transition: background 0.2s linear;
}

body.dark {
    background-color: #292C35;
}

.checkbox {
    opacity: 0;
    position: absolute;
}

.label {
    background-color: #111;
    border-radius: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 5px;
    position: relative;
    height: 26px;
    width: 50px;
    transform: scale(1.5);
}

.label .ball {
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    height: 22px;
    width: 22px;
    transform: translateX(0px);
    transition: transform 0.2s linear;
}

.checkbox:checked + .label .ball {
    transform: translateX(24px);
}


이제 Toggler 버튼의 로직을 프로그래밍하고 이 자바스크립트 코드를 script.js에 붙여넣습니다.

const inp = document.getElementById('inp');

inp.addEventListener('change', () => {
    document.body.classList.toggle('dark')
})


이것이 바로 공을 클릭하여 마법을 확인하는 것입니다.


이 튜토리얼 비디오는 이미 제 채널에 있습니다 - (Fantastic Frontend)
더 멋진 콘텐츠를 보려면 채널을 구독하고 비디오에 좋아요를 누르십시오.
또한 dev.to에서 저를 팔로우하는 것을 잊지 마세요.

Arjun의 💗로 제작
링 진행률 표시줄
구인 공고 웹 사이트: 건물 게시물 페이지

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage