다크모드 고정 방법

다크모드 고정 방법

QA

다크모드 고정 방법

본문


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



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");
});

답변을 작성하시기 전에 로그인 해주세요.
전체 28
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT