다크 모드 전환 기능(CSS 전용)

8687 단어 csshtmltutorialdesign
한동안 CSS에 익숙했다면 평면 스타일 HTML 문서뿐만 아니라 CSS가 얼마나 강력한지 알 것입니다.
이 기사에서는 CSS만 사용하여 프로젝트에서 다크 모드 토글 기능을 달성하는 방법을 보여드리겠습니다!
BTW 이것은 dev.to에 대한 나의 첫 번째 기사이므로 내가 확실히 저지르게 될 몇 가지 실수에 대해 나와 함께 참아주세요 😬

알아야 할 사항:


  • HTML
  • CSS

    • 접근하다



    우리 프로젝트에서는 확인란을 사용하여 밝은 모드와 어두운 모드 사이를 전환합니다. 전체 페이지 콘텐츠를 마무리하기 위해 확인란 속성을 기반으로 컨테이너의 배경 및 글꼴 색상의 스타일을 지정합니다.

    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">
      <link rel="stylesheet" href="style.css" type="text/css">
      <title>Dark Mode Toggle</title>
   </head>
   <body>
      <!-- Checkbox Toggle -->
      <input type="checkbox" id="toggle">

      <!-- Container -->
      <div class="container">
         Make sure to include all your content inside this container div.
      </div>

   </body>
</html>

    CSS


    범용 및 컨테이너 스타일링



    범용 선택기와 컨테이너에 스타일을 지정하는 것으로 시작하겠습니다.

    /* Universal Styling */
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

/* Container for all the elements */
.container {
  width: 100%;
  min-height: 100vh;
  padding: 10px;
  background-color: #EEE;
  color: #333;
  transition: all 0.4s ease-out;
}


    토글 버튼 스타일링



    이제 몇 가지 간단한 스타일을 적용하여 확인란을 토글 버튼으로 바꿉니다.

    /* Toggle Button */
#toggle {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 60px;
  height: 30px;
  border-radius: 30px;
  background-color: #333;
  position: absolute;
  top: 50px;
  right: 50px;
  transition: all 0.5s ease-in;
  cursor: pointer;
  z-index: 1;
}

/* Making a dot switch inside the Toggle Button */
#toggle::before {
  content: "";
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #EEE;
  position: absolute;
  top: 50%;
  left: 3px;
  transform: translateY(-50%);
  transition: all 0.5s ease-in;
}

/* Changing toggle button background when checked */
#toggle:checked {
  background: #03FFC0;
}

/* Changing dot switch color and moving to the right side when checked */
#toggle:checked::before {
  background: #333;
  left: 32px;
}


    최종 스타일링



    마지막으로 체크박스 속성이 체크되어 있을 때 이 스타일을 사용하여 컨테이너 배경을 변경합니다.

    /* Changing the background & font color when checked */
#toggle:checked ~ .container {
  background-color: #333;
  color: #EEE;
}


    그게 다야! 🤩 이제 다크 모드 토글 기능이 있는 완전히 작동하는 페이지가 생겼습니다.
    전체 소스 코드here를 참조하십시오.
    비디오 자습서: .

    읽어 주셔서 감사합니다! ❤
    React 및 Sass를 사용한 스마트 Navbar
    Typescript와 Mongez를 사용하여 Clean React Js 프로젝트를 만들어 봅시다. 3부: 프로젝트 앱

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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