I have successfully implemented dark mode toggling in my application. However, when I try to switch back to light mode, the CSS does not seem to be reloading properly.
Below is the code snippet:
//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>
);
};
This is my 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")
);
This is my dark theme
//DarkTheme.jsx
import React from "react";
import "./dark-theme.css";
const DarkTheme = () => <></>;
export default DarkTheme;
This is my light theme
//LightTheme.jsx
import React from "react";
import "./light-theme.css";
const LightTheme = () => {
console.log("light theme loading");
return <></>;
};
export default LightTheme;
This is my useThemeHook
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];
};
When switching to Dark Mode, everything works fine. However, upon switching back to Light Mode, the light theme CSS requires a page refresh to take effect. The console shows that the component is rendered, but the light theme CSS is not applied.
https://i.sstatic.net/4syYv.png
Despite the console log message indicating that the light mode has loaded, the CSS styling does not update accordingly.
https://i.sstatic.net/eY1tT.png
Please offer any advice or insights on this issue
Thank you
EDIT:
For the full code, please refer to: https://codesandbox.io/s/antdesignlight-darktheme-gqwlyz?file=/src/components/UseTheme.jsx