javaScript로 Dark Mode를 구현해보자!

202210월 23

다크모드 버튼 생성 및 이벤트 생성


class DarkModeButton {
  constructor({ $target}) {
    const $darkBtn = document.createElement("input"); // 다크버튼 생성
    this.$darkBtn = $darkBtn;  // this에 엘리먼트 생성
    this.$darkBtn.type = "checkbox"; // checkbox형식의 다크버튼

    $darkBtn.className = "darkBtn"; // 클래스 추가

    $target.appendChild($darkBtn);  // 실제 html 엘리먼트 아래에 추가

    // os가 다크모드인지 판단하는 함수
    if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
      document.documentElement.setAttribute("color-theme", "dark");
      $darkBtn.checked = true; // 체크박스 체크
    } else {
      document.documentElement.setAttribute("color-theme", "light");
    }

    // 다크모드 토글
    $darkBtn.addEventListener("click", (e) => {
      if (e.target.checked) {
        document.documentElement.setAttribute("color-theme", "dark");
      } else {
        document.documentElement.setAttribute("color-theme", "light");
      }
    });
  }

기본적으로 $target이라는 부모 엘리먼트에 checkbox를 class를 추가해서 생성해줍니다.

다크모드 상태인지를 브라우저에서 알려면 여러 가지 방법이 있지만 아무것도 체크하지 않은

초기 상태에서 OS가 다크모드인지 아닌지를 알 수가 있습니다. 12 ~ 17번쨰 줄을 보시면

window.matchMedia("(prefers-color-scheme: dark)가 있는데 현재 OS가

다크모드일경우 MediaQueryList 객체안의 matches값이 true로 나타납니다.

as

다크모드일 경우 최상위 엘리먼트인 document에 color-theme='dark'라는 속성을 넣어줍니다.

아닐 경우에는 light 속성을 넣어주면 됩니다.

또한 checkbox를 이용해서 20~26번째 줄을 통해 토글 기능을 만들수도 있습니다.

CSS를 이용해서 실제 다크모드를 색칠하기


자 이제 최상위 엘리먼트가 Dark or Light 속성을 가지게 되었으니 css를 이용해서 색칠해 봅시다.

:root[color-theme="light"] {
  --background: #ffffff;
  --boxColor: #000000;
}

:root[color-theme="dark"] {
  --background: #000000;
  --boxColor: #ffffff;
}

html {
  background-color: var(--background); // 속성이 바뀔때마다 해당 값이 바뀐다.
  color: var(--boxColor);
}

css 파일에서 root의 속성중 color-theme가 light라면 --background값을 #ffffff

--boxColor값을 #000000로 설정함으로써 배경색과 텍스트 색깔을 바꿔줄수가 있습니다.

완성된 다크모드

js다크모드