다크 모드를 다시 로드하는 동안 흰색 배경 깜박임을 방지하는 방법은 무엇입니까?
- Patricia Arquette원래의
- 2024-11-04 02:58:011023검색
다크 모드를 다시 로드하는 동안 흰색 배경 깜박임을 제거하는 방법
앱에서 다크 모드를 구현할 때 흰색 문제를 해결하는 것이 중요합니다. 페이지를 다시 로드할 때 배경이 깜박입니다. 이 보기 흉한 깜박임은 페이지가 어두운 모드로 전환되기 전에 처음에 밝은 모드에서 로드될 때 발생합니다.
해결책: 페이지 렌더링 방지
이 깜박이는 문제를 해결하는 열쇠는 다음에 있습니다. 페이지 렌더링을 차단합니다.
섹션에서 DOM 파서 프로세스를 중지할 수 있습니다. 이를 통해 JavaScript 인터프리터는 data-theme 속성을 페이지 렌더링 프로세스를 계속하기 전에 요소를 추가하세요.구현:
- 에 스크립트 추가:
<code class="html"><script>
// Set the theme in <HEAD> before any other tag.
const setTheme = (theme) => {
theme ??= localStorage.theme || "light";
document.documentElement.dataset.theme = theme;
localStorage.theme = theme;
};
setTheme();
</script></code>
- 이동 끝의 스크립트:
다른 모든 스크립트를 렌더링을 차단하지 않는 방식으로 닫는 바로 앞에 배치합니다. 태그:
<code class="html"><script src="js/index.js"></script> <!-- Other <script> tags here --> </body> </html></code>
- 토글 기능을 위한 JavaScript 업데이트:
JavaScript 파일 내에서 다음과 같이 코드를 조정합니다.
<code class="javascript">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);
});</code>
추가 참고:
- 원하는 경우 위의 JavaScript 코드를 단일 .js 파일로 결합할 수 있습니다.
- 개선하려면 초기 테마 전환 중에 스피너를 사용하거나 애니메이션을 로드하는 것이 좋습니다. 사용자 경험.
위 내용은 다크 모드를 다시 로드하는 동안 흰색 배경 깜박임을 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.