그누보드 QA - 다크모드 고정 방법

다크모드 고정 방법

켠켠 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2021.10.17 19:33:09 조회 1387 (14.♡.♡.22)

본문


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

볼피드 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2021-10-17 19:37:12 220.♡.♡.108



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