페이지를 다시 로드할 때 다크 모드 깜박임을 제거하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

페이지를 다시 로드할 때 다크 모드 깜박임을 제거하는 방법은 무엇입니까?

Mary-Kate Olsen

풀어 주다： 2024-11-03 10:40:03

원래의

438명이 탐색했습니다.

How to Eliminate Dark Mode Flickering on Page Reload?

다시 로드 시 다크 모드 깜박임 흰색: 원활한 전환을 위한 렌더링 차단

로컬 저장소 사용 시 페이지 새로 로드 시 다크 모드 깜박임 문제가 발생함 사용자 기본 설정을 유지합니다. 이 문제를 해결하려면 처음에 페이지 렌더링을 차단한 다음 테마 기본 설정을 적용하는 것이 좋습니다.

해결책: 페이지 렌더링 차단

<code class="html"><script>
  // Set this in <HEAD> top before any other tag.
  const setTheme = (theme) => {
    theme ??= localStorage.theme || "light";
    document.documentElement.dataset.theme = theme;
    localStorage.theme = theme;
  };
  setTheme();
</script></p>
<p>이 스크립트는 로컬 저장소를 기반으로 테마를 초기화하거나 기본값을 "light"로 설정합니다.</p>
<p><strong>비차단 스크립트</strong></p> <p>닫는 </body> 앞에 다른 모든 스크립트를 배치하세요. 렌더링을 차단하지 않는 방식으로 태그 지정:</p>
<pre class="brush:php;toolbar:false"><code class="html"><script src="js/index.js"></script>
<script src="other_scripts.js"></script>
<!-- Closing </body> and </html> go here --></code>

로그인 후 복사

index.js의 사용자 정의

index.js 파일에서 테마 전환을 처리합니다.

<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>

로그인 후 복사

이 코드는 체크박스를 전환할 때 테마를 업데이트합니다. 또는 이 스크립트를 별도의 JS 파일에 배치할 수도 있습니다.

이러한 변경 사항을 구현하면 페이지 렌더링이 처음에 차단되어 테마 기본 설정을 즉시 설정할 수 있습니다. 이는 흰색 깜박임 효과를 제거하고 밝은 모드와 어두운 모드 사이의 원활한 전환을 제공합니다.

위 내용은 페이지를 다시 로드할 때 다크 모드 깜박임을 제거하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!