localStorage.getItem 无法更改导航栏的样式

Question

所以我试图在我使用 Bootstrap 制作的网站中交替使用浅色和深色主题。一切正常，但问题是浏览器在刷新网站后不会“记住”它所在的主题，即使它应该在组件呈现时检索主题。

import React, {useState, useEffect} from 'react'
import Link from "next/link"
export default function Navbar() {
    const localTheme = typeof window !== 'undefined' ? localStorage.getItem('theme') : true
    const [theme, setTheme] = useState(localTheme);
    useEffect(() => localStorage.setItem("theme", theme), [theme])
    return (
        <header>
            <nav className={theme ? "navbar navbar-expand-lg bg-light navbar-light py-3" : "navbar navbar-expand-lg bg-dark navbar-dark py-3"}>
                <--Rest of Navbar--!>
                        <div className="form-check form-switch ms-3">
                        <input onClick={() => setTheme(!theme)} className="form-check-input" type="checkbox" id="flexSwitchCheckDefault"/>
                        <label className="form-check-label fw-bold" htmlFor="flexSwitchCheckDefault" style={theme ? {color: "black"} : {color:"white"}}>{theme ? "Light" : "Dark"} Theme</label>
                        </div>
                    </div>                    
                </div>
            </nav>
        </header>

这是切换到深色主题后本地存储的图片，它会记住该值，但是每当我刷新页面时，导航栏主题都会变亮

Answer 1

这是工作示例：

import React, { useState, useEffect } from "react";

const defaultTheme = "light";

export default function Navbar() {
  const localTheme =
    typeof window !== "undefined"
      ? localStorage.getItem("theme") || defaultTheme
      : defaultTheme;

  const [theme, setTheme] = useState(localTheme);
  console.log(`theme`, theme);

  useEffect(() => localStorage.setItem("theme", theme), [theme]);

  return (
    <div>
      <div>Current theme is: {theme}</div>
      <input
        onClick={() => setTheme(theme === "light" ? "dark" : "light")}
        type="checkbox"
        checked={theme === "dark"}
      />
      <label style={theme === "dark" ? { color: "black" } : { color: "white" }}>
        {theme === "light" ? "Light" : "Dark"} Theme
      </label>
    </div>
  );
}