[Javascript] 버튼 하나로 다크 모드 설정하기 (toggle)

728x90

오늘 해 볼 실습입니다.

✅ 목표

버튼 하나를 클릭하면서 다크모드, 라이트모드를 변환합니다.
다크모드, 라이트모드의 자바스크립트 작성 시 toggle을 사용합니다.

먼저, html 코드를 작성합니다.

이 실습은 다크모드, 라이트변환 자바스크립트 실습을 위한 것이니 html은 간단히 하겠습니다.

✅ Html

가운데 중앙 정렬로 div 박스를 만듭니다.
오른쪽 상단에 버튼을 고정합니다.

<body class="wrap light-mode">

  <div>
    <h1>Web Programming</h1>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>Javascipt</li>
    </ul>
  </div>

  <button id="modeButton">
    다크 모드
  </button>
  
</body>

body 전체에 클래스를 주어 버튼을 누를 때마다 body 전체의 배경색, 글자 색을 한번에 변경합니다.
body 클래스에 light-mode 클래스를 추가합니다.
- 버튼이 눌릴 때 dark-mode로 클래스를 변경하면 dark-mode CSS 가 적용되고
- light-mode로 클래스를 변경하면 light-mode CSS가 적용됩니다.
  - 이때, dark-mode 인 상황에서 버튼을 누르면 light-mode로 변경되고
  - light-mode인 상황에서 버튼을 누르면 dark-mode로 변경되게 하기 위해
  - toggle을 사용합니다.

✅ CSS

<style>
    *{
      box-sizing: border-box;
    }

    body{
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    button{
      position: fixed;
      top: 20px;
      right: 20px;
      padding: 10px;
      background-color: white;
      color: black;
    }

    .dark-mode{
      background-color: black;
      color: white;
    }

    .dark-mode button{
      background-color: black;
      border: 1px solid white;
      color: white;
    }

    .light-mode{
      background-color: white;
      color: black;
    }

  </style>

모드가 바뀌면 버튼 내부 색과 글자 색도 변경해야 하므로
.dark-mode button
.dark-mode 클래스 안에 있는 button 으로 CSS 를 만들어줍니다.

✅ JavaScript

  <script>

    document.addEventListener('DOMContentLoaded', function(){
      const modeBtn = document.querySelector('#modeButton');
      const body= document.body;

      modeBtn.addEventListener('click', (e)=>{
        body.classList.toggle('dark-mode');
        body.classList.toggle('light-mode');

        if(body.classList.contains('dark-mode')){
          modeBtn.innerText = "다크 모드";
        }else{
          modeBtn.innerText = "라이트 모드";
        }

      });
    });

  </script>

DomContentLoaded :

문서 내용이 모두 로드되었을 때 실행하여, 네트워크 문제가 있을 때에 발생할 수 있는 CSS 오류를 방지합니다.

💡 클래스 속성 toggle 하기 💡

toggle을 사용하지 않는다면 아래와 같은 코드로 작성할 수 있습니다.

document.addEventListener('DOMContentLoaded', function(){
      const modeBtn = document.querySelector('#modeButton');
      const body= document.body;

      modeBtn.addEventListener('click', (e)=>{
        // body.classList.toggle('dark-mode');
        // body.classList.toggle('light-mode');

        if(body.classList.contains('dark-mode')){
          modeBtn.innerText = "다크 모드";
          body.classList.remove('dark-mode');
          body.classList.add('light-mode');
        }else{
          modeBtn.innerText = "라이트 모드";
          body.classList.add('dark-mode');
          body.classList.remove('light-mode');
        }

      });
    });

하지만 remove와 add를 삭제하고 다시 추가하는 과정이 꽤 번거롭습니다.

이럴 때 사용할 수 있는 속성이 toggle 입니다.

toggle이란, 온/오프, 끄기/켜기 처럼 2가지 상태를 번갈아 바꾸는 것을 말합니다.

toggle 함수는 이 실습처럼

클래스 이름만 지정할 수도 있고,
조건을 함께 사용하여 조건이 true인 경우에 해당 클래스를 토글하도록 지정하기도 합니다.

toggle(클래스명)
toggle(클래스명, 조건)

기본형은 이렇게 2가지입니다.

1번 기본형은 아래와 같습니다

// 클래스 이름을 dark-mode로 변경합니다.
toggle('dark-mode')

2번 기본형과 같이 조건을 함께 쓰는 경우입니다.

//this가 체크가 된 경우, 클래스명을 'dark-mode'로 변경합니다.
//checked 가 사용되었으므로 this는 checkbox 입니다.
toggle('dark-mode', this.checked)

✅ 전체 코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>다크 모드</title>

  <!-- light-mode, dark-mode css 각각 만들고
        .light-mode     
        .wrap .dark-mode
        
        script :
          버튼 누르면 toggle로 
          classList에 dark-mode 포함되어 있으면 ~ 버튼 text 바꾸기
        -->
  <style>
    *{
      box-sizing: border-box;
    }

    body{
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    button{
      position: fixed;
      top: 20px;
      right: 20px;
      padding: 10px;
      background-color: white;
      color: black;
    }

    .dark-mode{
      background-color: black;
      color: white;
    }

    .dark-mode button{
      background-color: black;
      border: 1px solid white;
      color: white;
    }

    .light-mode{
      background-color: white;
      color: black;
    }

    

  </style>

</head>

<body class="wrap light-mode">

  <div>
    <h1>Web Programming</h1>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>Javascipt</li>
    </ul>
  </div>

  <button id="modeButton">
    다크 모드
  </button>

  <script>

    document.addEventListener('DOMContentLoaded', function(){
      const modeBtn = document.querySelector('#modeButton');
      const body= document.body;

      modeBtn.addEventListener('click', (e)=>{
        body.classList.toggle('dark-mode');
        body.classList.toggle('light-mode');

        if(body.classList.contains('dark-mode')){
          modeBtn.innerText = "다크 모드";
        }else{
          modeBtn.innerText = "라이트 모드";
        }

      });
    });

    //toggle 을 사용하지 않으면
    // document.addEventListener('DOMContentLoaded', function(){
    //   const modeBtn = document.querySelector('#modeButton');
    //   const body= document.body;

    //   modeBtn.addEventListener('click', (e)=>{
    //     // body.classList.toggle('dark-mode');
    //     // body.classList.toggle('light-mode');

    //     if(body.classList.contains('dark-mode')){
    //       modeBtn.innerText = "다크 모드";
    //       body.classList.remove('dark-mode');
    //       body.classList.add('light-mode');
    //     }else{
    //       modeBtn.innerText = "라이트 모드";
    //       body.classList.add('dark-mode');
    //       body.classList.remove('light-mode');
    //     }

    //   });
    // });
    
  </script>
  
</body>
</html>

728x90

✅ 목표

✅ Html

✅ CSS

✅ JavaScript

💡 클래스 속성 toggle 하기 💡

toggle이란, 온/오프, 끄기/켜기 처럼 2가지 상태를 번갈아 바꾸는 것을 말합니다.

toggle 함수는 이 실습처럼

✅ 전체 코드

티스토리툴바