심플 다크/라이트 모드

프로젝트에 다크 모드를 추가하는 가장 간단한 방법은 다음과 같습니다.
체크박스와 JavaScript 함수를 호출하는 onClick을 사용하여 HTML에 토글 버튼 추가

 <label id="toggle">
   <input type="checkbox" onclick="toggleDarkMode(event)">
   <span id="slider"></span>
 </label>

그런 다음 CSS 변수를 어두운 모드 색상으로 설정하여 CSS에 데이터 모드를 추가합니다.

:root {
  font-size: 10px;
  --bg: white;
  --font-color: black;
  --btn-bg: black;
  --btn-color: white;
}

[data-mode="dark"] {
  --bg: black;
  --font-color: white;
  --btn-bg: white;
  --btn-color: black;
}

이제 데이터 모드를 설정하거나 제거하는 JavaScript 함수를 작성하는 일만 남았습니다.

function toggleDarkMode(event) {
  const isDarkmode = event.target.checked

  if (isDarkmode) {
    document.documentElement.setAttribute('data-mode', 'dark')
  } else {
    document.documentElement.setAttribute('data-mode', '')
  }
}

그런 다음 몇 가지 CSS를 추가하여 버튼을 더 보기 좋게 만들고 전환을 추가할 수 있습니다.

:root {
  font-size: 10px;
  --bg: white;
  --font-color: black;
  --btn-bg: black;
  --btn-color: white;
}

[data-mode="dark"] {
  --bg: black;
  --font-color: white;
  --btn-bg: white;
  --btn-color: black;
}

body {
  width: 100vw;
  font-size: 2rem;
  background-color: var(--bg);
  color: var(--font-color);
}

#toggle {
  margin-right: 2rem;
  width: 6rem;
  height: 3.4rem;
  border-radius: 3rem;
  background-color: var(--btn-bg);
}

#toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

#slider {
  position: absolute;
  z-index: 5;
  cursor: pointer;
  height: 2.5rem;
  width: 2.5rem;
  top: 1.23rem;
  right: 1.8rem;
  border-radius: 3rem;
  background-color: var(--btn-color);
  transition: ease-in .2s;
}

#slider.dark {
  right: 4.2rem;
}

최종 결과는 다음과 같습니다.