다크모드 고정 방법 채택완료
켠켠
4년 전
조회 2,496
</p>
<p>document.addEventListener("DOMContentLoaded", function () {
var modeSwitch = document.querySelector(".mode-switch");</p>
<p> modeSwitch.addEventListener("click", function () {
document.documentElement.classList.toggle("dark");
modeSwitch.classList.toggle("active");
});</p>
<p>다크모드를 구현하긴 했는데 새로고침이나 페이지를 이동하게되면 풀리게 되는데요,
localStorage 구문을 사용하면 된다고 나오는데 제가 잘못넣는건지 작동이 안돼서 고수님들께
질문드려봅니다 ? 저 구문에서 다크모드를 고정하려면 localStorage를 어떻게 넣어야 할까요..?
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
4년 전
</p>
<pre>
<code>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");
});</code></pre>
<p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 3개
�
켠켠
4년 전
답변감사합니다. 이 코드도 새로고침하거나 페이지를 이동하게되면 다크모드가 풀리네요.. 조금 더 찾아볼게요. 감사합니다 :)
�
볼피드
4년 전
중간 비교문이 일부 오타가 있네요
document.documentElement.classList.contains로 수정하면 정상동작 될듯 하네요
document.documentElement.classList.contains로 수정하면 정상동작 될듯 하네요
�
켠켠
4년 전
감사합니다! 저도 오타를 발견못했네요.. 고수님 감사합니다 :) 좋은밤 보내세요!
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인