웹 다크모드 구현하기

다크모드를 구현하기 위해선 여러가지 방법이 있다.

 

prefers-color-scheme

css 미디어 특성을 이용해서 사용자의 OS가 사용하는 테마를 감지하여 적용되는 것.

<style>
.theme {
  display: block;
  width: 5rem;
  height: 5rem;
  background: black;
  color: white;
}

@media (prefers-color-scheme: light) {
  .theme {
    background: white;
    color: black;
  }
}
</style>


<div class="theme">Theme</div>

 

for JavaScript

테마를 변경코자하는 기능을 추가하겠다고 하면 JS에서 테마를 감지할 필요가 있으므로, matchMedia를 사용해준다.

window.matchMedia("(prefers-color-scheme: dark)").matches

 

See the Pen Dark Theme 2 by yerimkwon (@yerim0129) on CodePen.