重新加載/導航到新頁面時，暗模式默認返回亮模式

Question

每個人。

我有一個暗模式切換，它似乎工作得很好，只是它在導航到新頁面或刷新時清除了它所在的模式。

我如何確保不會發生這種情況？

 import React, { useEffect, useState } from "react"; const useDarkMode = () => { let [theme, setTheme]: any = useState("light"); const colorTheme = theme === "dark" ? "light" : "dark"; useEffect(() => { const root = window.document.documentElement; root.classList.remove(colorTheme); root.style.colorScheme = theme; root.classList.add(theme); }, [theme, colorTheme]); return [colorTheme, setTheme] as const; }; export default useDarkMode;

Answer 1

您可以將模式保存在會話存儲或本地存儲中。 您在開始時檢查您的變量是否已正確初始化，否則您默認設置輕量模式並應用於頁面。 並且當您更改模式時，您不會忘記修改會話存儲或本地存儲中的值。