diff --git a/client/public/index.html b/client/public/index.html index 03e0be82..043e0b29 100644 --- a/client/public/index.html +++ b/client/public/index.html @@ -12,7 +12,7 @@ -
+
\ No newline at end of file diff --git a/client/src/App.js b/client/src/App.js index 50802db6..2d9434fa 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -1,9 +1,27 @@ -import React, { Fragment, useReducer } from "react"; +import React, { Fragment, useReducer, useEffect } from "react"; import Routes from "./components"; import { LayoutContext, layoutState, layoutReducer } from "./components/shop"; function App() { const [data, dispatch] = useReducer(layoutReducer, layoutState); + + // Apply dark class to document on initial load and when darkMode changes + useEffect(() => { + const root = document.documentElement; + const body = document.body; + + if (data.darkMode) { + root.classList.add("dark"); + body.classList.add("dark"); + // Also set a data attribute for CSS targeting + root.setAttribute("data-theme", "dark"); + } else { + root.classList.remove("dark"); + body.classList.remove("dark"); + root.setAttribute("data-theme", "light"); + } + }, [data.darkMode]); + return ( diff --git a/client/src/components/admin/partials/AdminNavber.js b/client/src/components/admin/partials/AdminNavber.js index 93389caf..6a6d7c49 100644 --- a/client/src/components/admin/partials/AdminNavber.js +++ b/client/src/components/admin/partials/AdminNavber.js @@ -1,8 +1,11 @@ -import React, { Fragment } from "react"; +import React, { Fragment, useContext } from "react"; import { useHistory } from "react-router-dom"; +import { LayoutContext } from "../../shop"; +import DarkModeToggle from "../../shop/partials/DarkModeToggle"; const AdminNavber = (props) => { const history = useHistory(); + const { data } = useContext(LayoutContext); const logout = () => { localStorage.removeItem("jwt"); @@ -13,12 +16,12 @@ const AdminNavber = (props) => { return ( -