다크모드 적용 후 페이지 전환 시 깜빡이는 문제가 생길 수 있습니다.
원인
근본적인 이유는 페이지를 읽는 순서와 적용시점 때문입니다.
책을 읽을 때 위에서부터 읽듯이 웹페이지도 위에서 부터 순차적으로 코드를 읽고 실행을 시킵니다.
다크모드 적용하는 방법은 다양합니다만, html 혹은 body에 dark 관련 class를 추가해서 제작을 했다면, 스크립가 다크를 감지해서 먼저 코드상에 적용이 되어야 합니다. ex) <html color-thema="dark">
그리고 css에 적용을 했을때는 [color-thema="dark"] body {background:var(--background)} 이런 식으로 적용이 되겠죠?
다른 방식으로는 body class="dark-mode" 이렇게 될 수 도 있겠네요.
반응형
해결방법은 웹페이지 로딩이 다 되고 나서 적용이 되면 깜빡임을 없앨 수 있습니다.
해결방법
1. 먼저 페이지를 다읽히고 페이지가 보이게 만들기 위해서 body를 css로 히든처리합니다.
body{
visibility: hidden; /* body를 안보이게 히든처리한다. */
}
2. 다읽히고 body가 보일 수 있게 javascript 와 css를 아래와 같이 추가합니다.
body.loaded {
visibility: visible;
}
로딩이 다되고 나서 body에 loaded 클래스를 추가를 해줍니다.
document.body.classList.add('loaded'); // body에 loaded 추가
script는 </body> 바로 위에 넣으시면 되고, 다크모드 관련 js에 같이 넣으면 됩니다.
포인트는 웹페이지를 다읽고 나서 body가 보이게 하는 겁니다.
물론 여러 다양한 방법이 있지만, "이런 방법도 있구나"라고 참고하시면 될듯합니다.
728x90
