다크모드 고정 방법
본문
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");
});
답변감사합니다. 이 코드도 새로고침하거나 페이지를 이동하게되면 다크모드가 풀리네요.. 조금 더 찾아볼게요. 감사합니다 :)
중간 비교문이 일부 오타가 있네요
document.documentElement.classList.contains로 수정하면 정상동작 될듯 하네요
감사합니다! 저도 오타를 발견못했네요.. 고수님 감사합니다 :) 좋은밤 보내세요!
답변을 작성하시기 전에 로그인 해주세요.