다크모드 전환 시 깜빡임 문제

[노현수]

let toggleBtn = document.querySelector('.toggle-btn'); // 토글 버튼
let body = document.body; // body 
let darkMode = 'darkModeEnabled'; // 다크 모드 활성화 여부를 저장할 키

// 페이지 로드될 때 저장된 모드를 확인하여 적용
window.addEventListener('load', () => {
applyDarkMode(sessionStorage.getItem(darkMode) === 'true');
});

// 다크 모드를 적용하는 함수
function applyDarkMode(e) {
body.style.visibility = 'hidden'; // 페이지 내용을 숨김
if (e === true) { // 다크 모드가 활성화된 경우
body.classList.add('dark-mode'); // dark-mode 클래스 추가
 } else { // 다크 모드가 비활성화된 경우
body.classList.remove('dark-mode'); // dark-mode 클래스 제거
 }
sessionStorage.setItem(darkMode, e.toString()); // 모드 상태 저장
body.style.visibility = 'visible'; // 페이지 내용을 표시
}

// 토글 버튼 클릭 시 다크 모드를 토글
toggleBtn.addEventListener('click', () => { // 토글 버튼 클릭 시
applyDarkMode(!body.classList.contains('dark-mode')); // 다크 모드를 토글
});

다크모드가 토글된 상태에서 새로고침을 하면 먼저 라이트모드가 잠깐 보인 이후에 다크모드가 보여서 화면이 깜빡이는 현상이 발생합니다.

스크립트가 바디 마지막에 위치하다보니, 기본 상태인 라이트모드를 먼저 로드하고, 스크립트가 다크모드로 전환을 시켜서 이런 현상이 발생하는 거 같은데 해결방법이 어떻게 될까요?

그리고 localStorage 대신 sessionStorage를 사용한 이유는 다크모드 상태에서 페이지를 닫고 다시 열 때

라이트모드가 기본인 상태로 있도록 하려고 sessionStorage를 사용했습니다.

• 이 게시글은 노현수에 의해 1 년, 1 월 전에 수정됐습니다.

[codingapple]

addEventListener('load' 바깥에 써보거나 자바스크립트를 더 위로 옮겨봅시다

[글쓴이]

글