다크모드 고정 방법 채택완료

켠켠

4년 전 조회 2,709

Copy



document.addEventListener("DOMContentLoaded", function () {

  var modeSwitch = document.querySelector(".mode-switch");

  modeSwitch.addEventListener("click", function () {

    document.documentElement.classList.toggle("dark");

    modeSwitch.classList.toggle("active");

  });

다크모드를 구현하긴 했는데 새로고침이나 페이지를 이동하게되면 풀리게 되는데요,

localStorage 구문을 사용하면 된다고 나오는데 제가 잘못넣는건지 작동이 안돼서 고수님들께

질문드려봅니다 ? 저 구문에서 다크모드를 고정하려면 localStorage를 어떻게 넣어야 할까요..?

#다크모드 #그누보드 #고정

답변 1개

정렬:

채택된 답변

+20 포인트

볼피드

프로필 보기 이 회원 글보기 이 회원의 댓글보기

4년 전

Copy




document.addEventListener("DOMContentLoaded", function () {
  var modeSwitch = document.querySelector(".mode-switch");
  if(localStorage.getItem('theme') === 'dark') {
    document.documentElement.classList.add("dark");
  };
  modeSwitch.addEventListener("click", function () {
    document.documentElement.classList.toggle("dark");
    if(document.documentElement.contain('dark')) {
      localStorage.setItem('theme', 'dark');
    }else {
      localStorage.setItem('theme', '');
    }
    modeSwitch.classList.toggle("active");
});

로그인 후 평가할 수 있습니다