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

집

웹 프론트엔드

CSS 튜토리얼

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

Barbara Streisand

Nov 01, 2024 am 07:05 AM

How to Prevent White Flickering When Reloading a Dark Mode Page?

다크 모드 다시 로드 시 흰색 깜박임 문제

지속성을 위해 로컬 저장소를 활용하는 다크 모드 기능을 구현할 때 직면하는 일반적인 문제는 페이지를 다시 로드할 때 흰색 배경이 깜박입니다. 이는 일반적으로 DOM 파서가 다크 모드 스타일이 적용되기 전에 페이지를 렌더링하기 때문에 발생합니다.

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

이 문제를 해결하려면 페이지를 차단할 수 있습니다. 내에 배치된 작은 스크립트를 사용하여 렌더링합니다. 귀하의 문서. 이 스크립트는 요소를 클릭한 다음 페이지 렌더링을 계속합니다.

다음 스크립트를 다른 태그 앞에:

<code class="html"><script>
  // IMPORTANT: 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></code>

로그인 후 복사

다음으로 닫는 태그 바로 앞에 다른 모든 스크립트를 렌더링을 차단하지 않는 방식으로 옮깁니다. 태그:

<code class="html"><script src="js/index.js"></script>
<!-- other <script> tags here -->
<!-- Closing </body> </html> goes here --></code>

로그인 후 복사

마지막으로 js/index.js 파일에서 다음 코드를 사용합니다.

<code class="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);
});</code>

로그인 후 복사

이 솔루션을 구현하면 흰색 깜박임을 방지하고 페이지를 다시 로드할 때 밝은 모드와 어두운 모드 사이를 원활하게 전환합니다.

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

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.