index.js
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import "./App.css";
import AppTheme from "./AppTheme";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<AppTheme />
</React.StrictMode>
);
AppTheme.jsx
import React from "react";
import { useContext } from "react";
import { DarkModeComponent, darkModeContext } from "./DarkModeContext";
import "./AppTheme.css";
export default function AppTheme() {
return (
<DarkModeComponent>
<Header />
<Main />
<Footer />
</DarkModeComponent>
);
}
function Header() {
return <header className="header">Header</header>;
}
function Main() {
return (
<main className="main">
Main
<Profile />
<Products />
</main>
);
}
function Profile() {
return (
<div>
Profile
<User />
</div>
);
}
function User() {
return <div>User</div>;
}
function Products() {
return (
<div>
Products
<ProductDetail />
</div>
);
}
function ProductDetail() {
const { darkMode, handleDarkMode } = useContext(darkModeContext);
return (
<div>
Product Detail, {darkMode ? "true" : "false"}
<button onClick={handleDarkMode}>toggle</button>
</div>
);
}
function Footer() {
return <footer className="footer">Footer</footer>;
}
DarkModeContext.jsx
import { createContext } from "react";
import { useState } from "react";
export const darkModeContext = createContext();
export function DarkModeComponent({ children }) {
const [darkMode, setDarkMode] = useState(false);
const handleDarkMode = () => {
setDarkMode((prev) => !prev);
};
return (
<>
<darkModeContext.Provider value={{ darkMode, handleDarkMode }}>
{children}
</darkModeContext.Provider>
</>
);
}
View