231030 TIL) Vanila js에서 DarkMode 구현하기

요약

팀 프로젝트 중 기존의 완성된 html에 다크모드를 구현하는 것에 대한 고민과 해결

---

고민한 내용

영화검색 웹사이트를 만드는 중 추가기능으로 다크모드를 넣게 되었다. 구글링을 통해서 배운 다크모드들은 생각보다 간단한 코드로 구현할 수 있었다. 하지만 거의 대부분 아무것도 없던 HTML에서 다크모드를 적용하는 예시들이었고 이미 HTML,CSS,JS가 갖추어진 코드에서 다크모드를 적용하니 이상하게 레이아웃이 계속 박살났다. 

먼저 F12를 눌러 내가 어떤 부분이 문제인지 ELEMENT를 봤다. MAIN부분이 왼쪽으로 치우쳐져 있었고 그래서 처음에는 MAIN을 클래스를 줘서 CSS로 크기조정하고 그랬는데 다 실패했다.

두번째는 같은 HTML에 연결되어있는 CSS가 문제라고 생각했다. 중첩되는 클래스를 스타일지정을 해서 그런가하고 최대한 중첩되지 않게 STYLE 설정하고 우선순위를 줬는데 그것도 실패했다.

---

 

생각한 해결 방법

망연자실하다가 문득 처음에 내가 card(다크모드 클래스) 스타일을 줬던 걸 그대로 삭제하니까 허무할 정도로 레이아웃이 정상적으로 돌아오면서 다크모드가 실행되었다. 어이가 없었지만 기뻤다. 이것때문에 몇 시간을 삽질했지만 이걸 구현했다는 기쁨과 팀에게 민폐끼치는걸 면했다는 생각에 안도감이 들었다.

<div class="card"> 위치는 element를 봤을때 일단 contentbox가 다 들어가야할 것같아서 바로 위에 위치시켰다. 사실 여러군데 다 넣어본 결과 저기가 가장 좋을 것 같았는데 정확한 이유는 나도 아직 잘 모르겠다.

 

    <header class="header">
        <div class="innerHeader">
          <div class="title">BSANG MOVIE</div>

          <span id="theme_toggler" class="themeToggle">
            <input type="checkbox" id="change" style="display: none;">
            <label for="change" class="toggleLabel" id="moon">🌙</label>
            <label for="change" class="toggleLabel" id="sun" style="display: none;">🔆</label>
        </span>

const moonIcon = document.getElementById('moon');
const sunIcon = document.getElementById('sun');
const body = document.querySelector('body');

function toggleTheme() {
  if (body.classList.contains('dark_mode')) {
    body.classList.remove('dark_mode');
    moonIcon.style.display = 'inline';
    sunIcon.style.display = 'none';
  } else {
    body.classList.add('dark_mode');
    moonIcon.style.display = 'none';
    sunIcon.style.display = 'inline';
  }
}

moonIcon.addEventListener('click', toggleTheme);
sunIcon.addEventListener('click', toggleTheme);

다크모드를 구현하고 나서는 토글 스위치를 작성했다. 구글링한 것 중에 맘에 들었던 아이콘 두 개를 골라서 토글 스위치를 구현했다.  checkbox를 이용해서 저렇게 구현할 수 있다는 걸 처음 알았다. if else문으로 달 모양 아이콘을 누르면 해 아이콘으로 바뀌는것과 동시에 다크모드가 되고, 해 아이콘을 누르면 반대로 된다. 

 

:root {
  --body-bg: #f5f5f5;
  --card-bg: #e0e0e0;
  --card-bd-col: #bdbdbd;
  --text-color: #252525;
}
.dark_mode {
  --body-bg: #252525;
  --card-bg: #555;
  --card-bd-col: #212121;
  --text-color: #f5f5f5;
}

body {
  background: var(--body-bg);
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.day {
  background-color: white;
  color: black;
}

.night {
  background-color: black;
  color: white;
}

.toggleLabel {
  cursor: pointer;
  font-size: 36px; /* 아이콘의 크기를 조절하는 부분입니다. 원하는 크기로 조절할 수 있습니다. */
}

다크모드를 활용하기 위해서 body color를 var로 설정했다.

root는 전역 루트 스코프로 사용되어 주요색상변수들을 정의한다. 밑에 body부분에서 color을 var로 설정하면서 root에 있던 --body-bg를 참조해서 색상이 결정된다. 

 

---

회고

새롭게 알게된 것들이 많았다. 우선 다크모드라는 것을 처음으로 구현해봤다는 것이 가장 큰 성과인 것 같다. 처음에 잘 되지 않았을 때는 나는 백엔드 개발자인데 왜 프론트엔드 개발일에 멱살잡혀있지라는 현타도 왔다. 그래도 백엔드 개발자로서 알아두면 나중에 프론트엔드 개발자와의 소통하는데도 도움이 될 것 같아 좋게 생각하려고 한다.