다시 로드할 때 다크 모드가 흰색으로 깜박이는 이유는 무엇입니까?-CSS 튜토리얼-php.cn

다시 로드할 때 다크 모드가 흰색으로 깜박이는 이유는 무엇입니까?

Barbara Streisand

풀어 주다： 2024-11-02 05:11:02

원래의

525명이 탐색했습니다.

Why Does My Dark Mode Flicker White on Reload?

다시 로드 시 다크 모드에서 흰색 배경이 깜박임: 지연 해결

다크 모드 기능을 통합하면 흰색 배경이 잠시 깜박이는 문제가 발생하는 경우가 많습니다. 페이지를 다시 로드할 때. 이는 렌더링 순서로 인해 다크 테마 설정 적용이 지연되어 발생합니다.

이 문제를 해결하려면 페이지가 조기에 렌더링되는 것을 방지하는 것이 중요합니다. 섹션에서 페이지 렌더링을 차단하고 어두운 테마 속성이 계속하기 전에.

이 스크립트는 시작 부분에 포함되어야 하며 다른 태그보다 우선적으로 포함되어야 합니다.

<code class="html"><head>
  <script>
    // Place this in <HEAD> top before other tags
    const setTheme = (theme) => {
      theme ??= localStorage.theme || "light";
      document.documentElement.dataset.theme = theme;
      localStorage.theme = theme;
    };
    setTheme();
  </script>

  <!-- meta, title, etc... -->
</head></code>

로그인 후 복사

이후 다른 스크립트를 에 배치하는 것이 좋습니다. 렌더링을 차단하지 않는 방식, 닫는 꼬리표. 이렇게 하면 테마 할당 프로세스가 중단되는 것을 방지할 수 있습니다.

<code class="html"><script src="js/index.js"></script>
<!-- other <script> tags here -->
<!-- Closing </body> and </html> go 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!