From 209d6897f0c37c8fe15a0fa5b7f511080b08ea90 Mon Sep 17 00:00:00 2001 From: Yogesh Choudhary Paliyal Date: Tue, 13 Aug 2024 09:30:56 +0530 Subject: [PATCH 1/2] Add dark mode support Fixes #19 Add dark mode support to the application. * **Tailwind Configuration** - Enable dark mode by adding `darkMode: 'class'` in `tailwind.config.js`. * **CSS Styles** - Add dark mode styles for body, text, and background colors in `src/index.css`. * **App Component** - Add state to manage dark mode in `src/App.jsx`. - Add a button to toggle dark mode. - Apply dark mode class to the root div based on state. * **Header Component** - Update styles to support dark mode in `src/components/Header/Header.jsx`. * **Footer Component** - Update styles to support dark mode in `src/components/Footer/Footer.jsx`. --- For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/bhagirathpaliyal/E-commerce-page/issues/19?shareId=XXXX-XXXX-XXXX-XXXX). --- src/App.jsx | 54 +++++++++++++++++--------------- src/components/Footer/Footer.jsx | 4 +-- src/components/Header/Header.jsx | 26 +++++++-------- src/index.css | 12 +++++-- tailwind.config.js | 4 +-- 5 files changed, 54 insertions(+), 46 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 3181e90..fff0f49 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -18,40 +18,42 @@ import { UserTypeSelector } from './components/UserTypeSelecctor'; import { UserTypeSelectorLogin } from './components/UserTypeSelecctorLogin'; import AddProducts from './components/AddProducts'; - function App() { -const dispatch =useDispatch() + const dispatch = useDispatch(); + const [darkMode, setDarkMode] = useState(false); + + useEffect(() => { + dispatch(setUser(JSON.parse(localStorage.getItem('user')))); + }, []); -useEffect(()=>{ + const toggleDarkMode = () => { + setDarkMode(!darkMode); + }; - dispatch(setUser(JSON.parse(localStorage.getItem('user')))) - -},[]) return ( - - -
-
- - } /> - - } /> - } /> - } /> - } > - } /> + +
+
+ + + } /> + } /> + } /> + } /> + }> + } /> } /> } /> } /> } /> - - } /> - } /> - - -
- - + + } /> + } /> + +
+ ); } diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx index 394aac9..02d84f2 100644 --- a/src/components/Footer/Footer.jsx +++ b/src/components/Footer/Footer.jsx @@ -4,7 +4,7 @@ function Footer() { const today = new Date(); return (