ホームページ > 記事 > ウェブフロントエンド > ダークモードページをリロードするときに白いちらつきを防ぐにはどうすればよいですか?
ダークモードページをリロードするときに白いちらつきを防ぐにはどうすればよいですか?
- Barbara Streisandオリジナル
- 2024-11-01 07:05:31731ブラウズ
ダーク モードのリロードでの白いちらつきの問題
永続化のためにローカル ストレージを利用するダーク モード機能を実装する場合、直面する一般的な問題は次のとおりです。ページをリロードすると白い背景がちらつきます。これは、通常、DOM パーサーがダーク モード スタイルが適用される前にページをレンダリングするために発生します。
解決策: ページ レンダリングをブロック
この問題を解決するには、ページをブロックします。
内に配置された小さなスクリプトを使用してレンダリングします。あなたの文書の。このスクリプトは、 に data-theme 属性を設定します。次のスクリプトを
内に配置します。他のタグの前:<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>
次に、他のすべてのスクリプトを、終了 の直前にレンダリングをブロックしない方法に移動します。 tag:
<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 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。