페이지 새로고침 시 어두운 모드에서 흰색 배경이 깜박임 사용자가 어두운 모드를 활성화하고 페이지를 다시 로드할 때 문제가 발생합니다. 어두운 모드로 돌아가기 전에 흰색 배경이 표시됩니다. 이 짧은 깜박임은 주의를 산만하게 하고 사용자 경험을 저하시킬 수 있습니다. 이 문제를 해결하기 위한 이상적인 해결책은 필요한 어두운 모드 설정이 적용될 때까지 페이지가 렌더링되지 않도록 방지하는 것입니다. 이는 최소한의 <head> 시작 부분에 태그를 추가하세요. element.</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><code class="html"><head> <script> // Set theme in <HEAD> to avoid render blocking. const setTheme = (theme) => { theme ??= localStorage.theme || "light"; document.documentElement.dataset.theme = theme; localStorage.theme = theme; }; setTheme(); 로그인 후 복사 다른 태그보다 먼저 이 스크립트를 실행하면 브라우저가 DOM 구문 분석을 일시 중지하고 JavaScript 인터프리터를 호출합니다. 이를 통해 데이터 테마 속성을 요소는 다크 모드가 활성화된 상태에서 페이지가 원활하게 로드되도록 보장합니다. 또한, 닫는 직전에 렌더링을 차단하지 않는 방식으로 나머지 스크립트를 로드하는 것이 좋습니다. 태그: 로그인 후 복사 js/index.js 파일 내에서 다음과 같이 스크립트를 포함할 수 있습니다. const elToggleTheme = document.querySelector( '#dark-mode-button input[type="checkbox"]' ); elToggleTheme.checked = localStorage.theme === "dark"; elToggleTheme.addEventListener("change", () => { const theme = elToggleTheme.checked ? "dark" : "light"; setTheme(theme); });로그인 후 복사
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
