為什麼我的深色模式在重新加載時會閃爍白色？-css教學-PHP中文網

為什麼我的深色模式在重新加載時會閃爍白色？

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中文網其他相關文章！