ホームページ >ウェブフロントエンド >CSSチュートリアル >ダークモードのリロード中に白い背景がちらつくのを防ぐにはどうすればよいですか?
ダークモードのリロード中に白い背景がちらつくのを防ぐにはどうすればよいですか?
- Patricia Arquetteオリジナル
- 2024-11-04 02:58:011023ブラウズ
ダーク モードのリロード中に白い背景のちらつきをなくす方法
アプリにダーク モードを実装する場合、白の問題に対処することが重要ですページのリロード時に背景がちらつく。この見苦しいちらつきは、ページが最初にライト モードで読み込まれてからダーク モードに切り替わるときに発生します。
解決策: ページ レンダリングを防止します
このちらつきの問題を解決する鍵は、次のとおりです。ページのレンダリングをブロックします。
内に小さな script タグを配置することで、ドキュメントのセクションで、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>
- スクリプトを の最後に移動:
他のすべてのスクリプトをレンダリングをブロックしない方法で直前に配置します終わりの
以上がダークモードのリロード中に白い背景がちらつくのを防ぐにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。