[JavaScript / jQuery] Dark Mode 와 Light Mode 전환 버튼 누르면 Mode 전환하는 기능 만들기

💡 실습 포인트!

• Light Mode 와 Dark Mode 를 전환하는 버튼을 만드는 수업을 들으면서, 버튼 안의 문구만 바뀌는 게 아니라 실제 홈페이지에서 배경과 글씨색이 바뀌게끔 만들어보고 싶어졌다.
• 일반적으로 Dark Mode 는 흰색 글씨와 검은 배경이 주를 이루는데 완전 검은 배경은 뭔가 이질감이 느껴져서 배경색은 검정보다는 살짝 밝은 색을, 글씨는 골드색상으로 만들었다.

---

💜 HTML

<span class="badge bg-dark" id="badge">🌝 Dark Mode 🔄</span>

• 일단 Bootstrap 을 이용해서 기본 레이아웃을 잡아주고 로고 아래에 들어갈 수 있도록 넣어주었다.
• 그리고 Dark Mode 문구와 함께 달 이모티콘을 넣어주었다. Light Mode 에서는 해 이모티콘이 나올 예정!

---

💜 CSS

.dark {
  background: rgb(33, 37, 41) !important;
  color: gold !important;
}

#badge {
  font-size: 12px;
  cursor: pointer;
  width: 130px;
  text-align: center;
  padding: 6px;
  border: solid 1px gold;
}

• 모드 전환 버튼이 내가 원하는 위치에 배치되지 않기에 세부 조정을 좀 해주었다.
• 그리고  Dark Mode 일 때 붙일 dark class 에 background 색상과 글자 색상을 지정하여 작성해주었다. 
• Bootstrap 레이아웃을 가져오다보니 class 가 제대로 적용되지 않아서 부득이하게 !important 속성을 사용했다. 이 속성은 남발하면 안 되는.. 웬만해서는 쓰지말라고 한 속성이지만... 나에게는 다른 방법이 없었다... 😂

---

💜 JavaScript

var cnt = 0;
$('#badge').on('click', function(){
    cnt++;
    if(cnt % 2){
        $('#badge').html('🌞 Light Mode 🔄');
        $('body').addClass('dark');
        $('.navbar').addClass('navbar-dark');
        $('.navbar').removeClass('navbar-light');
        $('.navbar').addClass('bg-dark');
        $('.navbar').removeClass('bg-light');
        $('#logo').addClass('dark');
        $('.btn-login').addClass('dark');
        $('.list-group-item').addClass('dark');
        $('.white-bg').addClass('dark');
        $('.btn').addClass('dark');
    } else {
        $('#badge').html('🌝 Dark Mode 🔄');
        $('body').removeClass('dark');
        $('.navbar').addClass('navbar-light');
        $('.navbar').removeClass('navbar-dark');
        $('.navbar').addClass('bg-light');
        $('.navbar').removeClass('bg-dark');
        $('#logo').removeClass('dark');
        $('.btn-login').removeClass('dark');
        $('.list-group-item').removeClass('dark');
        $('.white-bg').removeClass('dark');
        $('.btn').removeClass('dark');
    }
})

• 버튼을 홀수번 클릭하면 Dark Mode 가 적용되면서 버튼 문구는 Light Mode 로 바뀌어야 하고, 짝수번 클릭하면 Light Mode 가 적용되면서 버튼 문구는 Dark Mode 로 바뀌어야 했다. 이 부분은 헷갈리면 직접 console.log() 찍어보자!
• 그 다음에는 각 Mode 에 맞게 적용되어야 하는 class 를 추가해주거나 제거해주었다.
• Bootstrap 에서 가져온 레이아웃에는 이미 Dark Mode 와 Light Mode 에 맞는 디자인이 class 로 이미 만들어져 적용되어 있는 경우가 있으므로 눈치껏.. 조정해보면 된다!