Ant Design暗黑模式切换后浅色模式CSS无法热重载求助

切换到暗黑模式一切正常，但切换回浅色模式时，必须刷新页面浅色主题CSS才会生效。控制台显示浅色模式组件已渲染，但CSS未重载。

相关代码 #

ThemeContext.jsx #

//ThemeContext.jsx
const DarkTheme = lazy(() => import("./dark-theme"));
const LightTheme = lazy(() => import("./light-theme"));

export const ThemeContext = createContext(null);

export const ThemeContextApp = ({ children, ...rest }) => {
  const [theme, handleToggle] = useTheme();
  return (
    <ThemeContext.Provider value={{ theme }} {...rest}>
      <Switch
        checkedChildren="Dark Mode"
        unCheckedChildren="Light Mode"
        checked={theme === "dark"}
        onChange={(checked) => {
          handleToggle(checked);
        }}
      />
      <Suspense fallback={<span />}>
        {theme === "dark" ? <DarkTheme /> : <LightTheme />}
      </Suspense>

      {children}
    </ThemeContext.Provider>
  );
};

index.js #

import React from "react";
import ReactDOM from "react-dom";
// import "./index.css";
import App from "./App";
import { store } from "./app/store";
import { Provider } from "react-redux";
import * as serviceWorker from "./serviceWorker";
import "antd/dist/antd.css";
import "react-toastify/dist/ReactToastify.min.css";
import { ThemeContextApp } from "./Components/Theme/ThemeContext";

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <ThemeContextApp>
        <App />
      </ThemeContextApp>
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);

DarkTheme.jsx #

//DarkTheme.jsx

import React from "react";
import "./dark-theme.css";
const DarkTheme = () => <></>;

export default DarkTheme;

LightTheme.jsx #

//LightTheme.jsx
import React from "react";
import "./light-theme.css";

const LightTheme = () => {
  console.log("light theme loading");
  return <></>;
};
export default LightTheme;

useTheme Hook #

import { useEffect, useState } from "react";

export const useTheme = () => {
  const [theme, setTheme] = useState("light");

  useEffect(() => {
    if (window.localStorage.getItem("theme")) {
      let localStorageItem = window.localStorage.getItem("theme");
      setTheme(localStorageItem);
    } else {
      window.localStorage.setItem("theme", theme);
    }
  }, []);

  useEffect(() => {
    let localStorageItem = window.localStorage.getItem("theme");
    if (localStorageItem !== theme) {
      window.localStorage.setItem("theme", theme);
    }
  }, [theme]);

  const handleToggle = (checked) => {
    if (checked) {
      setTheme("dark");
    } else {
      setTheme("light");
    }
    // return window.location.reload();
  };

  return [theme, handleToggle];
};

现象截图 #

• 控制台日志：
• CSS未重载现象：

解决方案 #

问题根源 #

当前通过懒加载空组件引入主题CSS的方式存在两个核心问题：

1. CSS文件被加载后不会自动从DOM中移除，深色主题的CSS样式优先级会覆盖浅色主题的样式
2. 切换回浅色时，LightTheme组件虽然重新渲染，但CSS文件已被浏览器缓存，不会重新加载，且深色CSS仍在页面中生效

方案一：使用CSS变量+根元素属性切换（推荐） #

这种方式无需动态加载CSS文件，通过切换根元素属性来切换主题变量，更高效且易维护：

1. 修改全局CSS文件（如index.css），定义主题变量：

:root[data-theme="light"] {
  --bg-color: #ffffff;
  --text-color: #333333;
  /* 补充其他浅色主题变量 */
}

:root[data-theme="dark"] {
  --bg-color: #1a1a1a;
  --text-color: #ffffff;
  /* 补充其他深色主题变量 */
}

/* 全局样式使用变量 */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}

2. 更新useTheme Hook，切换时同步修改根元素的data-theme属性：

import { useEffect, useState } from "react";

export const useTheme = () => {
  const [theme, setTheme] = useState("light");

  useEffect(() => {
    const savedTheme = window.localStorage.getItem("theme") || "light";
    setTheme(savedTheme);
    document.documentElement.setAttribute("data-theme", savedTheme);
  }, []);

  useEffect(() => {
    window.localStorage.setItem("theme", theme);
    document.documentElement.setAttribute("data-theme", theme);
  }, [theme]);

  const handleToggle = (checked) => {
    setTheme(checked ? "dark" : "light");
  };

  return [theme, handleToggle];
};

3. 删除DarkTheme.jsx和LightTheme.jsx，并简化ThemeContext.jsx：

// ThemeContext.jsx
export const ThemeContext = createContext(null);

export const ThemeContextApp = ({ children, ...rest }) => {
  const [theme, handleToggle] = useTheme();
  return (
    <ThemeContext.Provider value={{ theme }} {...rest}>
      <Switch
        checkedChildren="Dark Mode"
        unCheckedChildren="Light Mode"
        checked={theme === "dark"}
        onChange={(checked) => {
          handleToggle(checked);
        }}
      />
      {children}
    </ThemeContext.Provider>
  );
};

方案二：动态添加/移除CSS文件 #

如果需要保留原有CSS文件结构，可以通过动态操作DOM来加载/卸载主题CSS：

1. 创建主题管理工具函数：

// themeUtils.js
let currentThemeLink = null;

export const loadTheme = (theme) => {
  // 移除当前主题的CSS链接
  if (currentThemeLink) {
    document.head.removeChild(currentThemeLink);
    currentThemeLink = null;
  }

  // 创建新链接加载对应主题CSS
  const link = document.createElement("link");
  link.rel = "stylesheet";
  link.href = `./${theme}-theme.css`; // 根据实际文件路径调整
  document.head.appendChild(link);
  currentThemeLink = link;
};

2. 更新useTheme Hook，调用工具函数切换主题：

import { useEffect, useState } from "react";
import { loadTheme } from "./themeUtils";

export const useTheme = () => {
  const [theme, setTheme] = useState("light");

  useEffect(() => {
    const savedTheme = window.localStorage.getItem("theme") || "light";
    setTheme(savedTheme);
    loadTheme(savedTheme);
  }, []);

  useEffect(() => {
    window.localStorage.setItem("theme", theme);
    loadTheme(theme);
  }, [theme]);

  const handleToggle = (checked) => {
    setTheme(checked ? "dark" : "light");
  };

  return [theme, handleToggle];
};

3. 删除DarkTheme.jsx和LightTheme.jsx，并简化ThemeContext.jsx（同方案一的第三步）。

内容的提问来源于stack exchange，提问作者desh