[CSS] 다크 모드 적용하기

이번에 vanilla javascript로 간단한 화면을 만들 일이 있어서 다크 모드를 적용해봤다. 처음에는 미디어 쿼리를 이용해 prefers-color-scheme라는 방법으로 적용했는데, 자체적인 컬러모드 적용이 어렵고, 사용자가 다크 모드를 on/off 전환 할 수 없다는 문제가 있어 dataset으로 구현을 해봤다.

 

 

base.html

<button id="darkMode">
    <i class="gg-dark-mode"></i>
    Dark Mode
</button>

HTML에 다크 모드 on/off를 선택하기 위한 버튼을 만든다.

 

style.css

/* light mode */
body {
  height: 100vh;
  overflow-x: hidden;
  background-color: rgb(255, 255, 255);
}

/* dark mode */
body[data-theme='dark'] {
  background-color: #000;
  color: #fff;
}
body[data-theme='dark'] .gg-arrows-exchange {
  color: #fff;
}

css에 다크 모드를 적용했을 때의 CSS를 만든다.

나는 body에 data-theme='dark'를 추가 시킴으로써 다크 모드를 제어할 것이기 때문에 다크 모드시 적용될 모든 css 선택자 앞에 body[data-theme='dark']를 붙여줬다. 그러면 다크 모드 on이 되었을 때 body[data-theme='dark']가 붙은 CSS들이 일괄적용 된다.

 

main.js

const darkmode = document.getElementById('darkMode');

darkmode.addEventListener('click', () => {
    if (!document.body.hasAttribute('data-theme', 'dark')) {
        document.body.setAttribute('data-theme', 'dark');
    } else {
        document.body.removeAttribute('data-theme', 'dark');
    }
});

HTML의 button에 걸어둔 id를 가져와서 클릭시 attribute를 추가/제거 할 수 있도록 toggle을 만들었다.

만약 dateset으로 관리하고 싶지 않다면 setAttribute대신 classList.add/remove를 사용해 class로 관리할 수 있게 만들 수 있다.