JS 다크모드(Dark Mode) 만들기

JQuery, click이벤트, addClass, removeClass를 이용하여 다크모드 만들기

• 다크모드 적용 전
  
• 다크모드 적용 후
  

1. 다크모드 버튼 만들기

• html

    <div class="darkmode">
        <button class="darkmode_btn" type="button">
            <span class="darkmode_span">🌗 다크 모드로 보기</span>
        </button>
    </div>

• css

.darkmode_btn {
  border-radius: 15px;
  box-shadow: 0.5px 0.5px 2px 1px #eee;
  padding: 15px;
  background-color: #282828;
  color: white;
  margin-left: 10px;
  margin-top: 5px;
  border: none;
}

---

2. JQuery로 이벤트 감지 하기

$(".darkomode_btn").on("click",function(){
  만약에 true 면 white-box에 다크모드 적용하고
  아니면 white-box에서 다크모드를 제거한다.
})

• JQuery를 사용한 이유는 코드를 많이 줄일수 있기 때문이다. 만약 기본 문법을 사용한다면

let click = document.getElementClass()
click.addEventLister('click',function(){})

---

3. true/false 를 담을 변수 만들기

let darkmode_switch = true

$(".darkomode_btn").on("click",function(){
  만약에 true 면 white-box에 다크모드 적용하고
  아니면 white-box에서 다크모드를 제거한다.
})

---

4. 버튼이 클릭되면 darkmode_switch 의 값이 반대가 되게 만들기

let darkmode_switch = true

$(".darkomode_btn").on("click",function(){
  darkmode_switch = !darkmode_switch
  
  만약에 true 면 white-box에 다크모드 적용하고
  아니면 white-box에서 다크모드를 제거한다.
})

---

5. if문 완성하기

• 핵심은 removeClass 와 addClass 를 이용해 색상을 조종한다.

css

.dark {
  background-color: #282828;
  color: white;
}

JavaScript

let darkmode_switch = true

$(".darkmode_btn").on("click", function () {
  count = !count;
  if (count === true) {
    $(".white-box").removeClass("dark");
    $(".contact_icon").removeClass("dark");
    $(".darkmode_span").html("🌗 다크 모드로 보기");
  } else {
    $(".white-box").addClass("dark");
    $(".contact_icon").addClass("dark");
    $(".darkmode_span").html("☀️ 일반 모드로 보기");
  }
});