JavaScript의 다크 모드 토글 버튼

3288 단어 csstutorialwebdevjavascript
안녕하세요 아름다운 여러분, 오늘 이 게시물에서는 놀라운 디자인으로 Dark Mode Toggle Button in JavaScript **를 만드는 방법을 배웁니다. 그것을 만들기 위해 순수한 CSS, HTML 및 Javascript를 사용할 것입니다. 이 게시물을 즐기시기 바랍니다.

웹 사이트에 다크/라이트 모드 기능을 추가하는 것이 증가하고 있습니다. 다른 웹사이트에서 이미 보았을 수도 있습니다. 이 기능은 품질과 사용자 만족도를 향상시킵니다. YouTube 및 Facebook과 같은 다양한 웹 사이트에서 이러한 다크 모드 기능을 도입했습니다.

그것을 만들러 갑시다.

데모
Click 데모 보기!

JavaScript의 다크 모드 토글 버튼(소스 코드)



HTML 코드
먼저 HTML을 추가합니다. .html 확장자가 포함되어 있는지 확인하십시오. 예를 들면 PasswordGenerator.html 입니다.

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
  </head>

  <div class="all">
    <div class="container">
        <input type="checkbox" id="toggle">
    </div>

    <p>
        Lorem30
    </p>
   </div>

    <script src="script.js"></script>
  </body>
</html>


CSS 코드
CSS를 추가해 봅시다.

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    padding: 30px;
}
.all{
  width: 400px;
  margin: 40px auto;
}
.container{
    width: 100%;
    height: 40px;
    margin-bottom: 20px;
    position: relative;
}
#toggle{
    -webkit-appearance: none;
    appearance: none;
    height: 32px;
    width: 65px;
    background-color: #15181f;
    position: absolute;
    right: 0;
    border-radius: 20px;
    outline: none;
    cursor: pointer;
}
#toggle:after{
    content: "";
    position: absolute;
    height: 24px;
    width: 24px;
    background-color: #ffffff;
    top: 5px;
    left: 7px;
    border-radius: 50%;
}
p{
    font-family: "Open Sans",sans-serif;
    line-height: 35px;
    padding: 10px;
    text-align: justify;
    }
.dark-theme{
    background-color: #15181f;
    color: #e5e5e5;
}
.dark-theme #toggle{
    background-color: #ffffff;
}
.dark-theme #toggle:after{
    background-color: transparent;
    box-shadow: 10px 10px #15181f;
    top: -4px;
    left: 30px;
}


자바스크립트 코드
JavaScript는 주요 작업을 수행하며 토글 버튼을 클릭하면 테마가 변경됩니다. 위에서 추가한 다크모드의 CSS 코드를 스위치에 연결했습니다.

    document.getElementById("toggle").addEventListener("click", function()
{
    document.getElementsByTagName('body')[0].classList.toggle("dark-theme");
});


축하합니다! 이제 Dark Mode Toggle Button in JavaScript 을(를) 성공적으로 생성했습니다.

이 튜토리얼을 즐기셨기를 바랍니다. 개선할 수 있는 방법에 대한 의견과 제안을 자유롭게 남겨주세요. 그래서 다음에는 더 개선된 콘텐츠를 제공할 수 있습니다.

내 Instagram 페이지: 여기에서 저에게 연락할 수 있습니다.
Webpack 및 Tailwind CSS 설정
스왑이 있는 가장 작은 문자열

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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