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

다크 모드를 다시 로드하는 동안 흰색 배경 깜박임을 방지하는 방법은 무엇입니까?

Patricia Arquette

풀어 주다： 2024-11-04 02:58:01

원래의

980명이 탐색했습니다.

How to Prevent White Background Flickering During Dark Mode Reload?

다크 모드를 다시 로드하는 동안 흰색 배경 깜박임을 제거하는 방법

앱에서 다크 모드를 구현할 때 흰색 문제를 해결하는 것이 중요합니다. 페이지를 다시 로드할 때 배경이 깜박입니다. 이 보기 흉한 깜박임은 페이지가 어두운 모드로 전환되기 전에 처음에 밝은 모드에서 로드될 때 발생합니다.

해결책: 페이지 렌더링 방지

이 깜박이는 문제를 해결하는 열쇠는 다음에 있습니다. 페이지 렌더링을 차단합니다. 섹션에서 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>

로그인 후 복사

추가 참고: