From 6ff9debb92182137369264f8cae815a2b4691f9a Mon Sep 17 00:00:00 2001 From: "Mohd. Ashhar Khan" Date: Sun, 27 Oct 2024 23:19:41 +0530 Subject: [PATCH 1/4] added light/dark theme toggle --- package-lock.json | 51 --- src/App.tsx | 135 ++++--- src/components/AboutUsPage.tsx | 419 ++++++++-------------- src/components/ButtonDetailsPage.tsx | 153 +++++--- src/components/CardDetailsPage.tsx | 122 ++++--- src/components/CheckboxDetails.tsx | 17 +- src/components/ContributorsPage.tsx | 123 +++++-- src/components/DonationPage.tsx | 10 +- src/components/Footer.tsx | 33 +- src/components/GlassyUIComponentsPage.tsx | 172 +++++---- src/components/GlassyUILandingPage.tsx | 83 +++-- src/components/Header.tsx | 95 +++-- src/components/InputDetailPage.tsx | 156 +++++--- src/components/ModalDetailsPage.tsx | 149 +++++--- src/components/NavigationDetailsPage.tsx | 90 +++-- src/components/PopupDetailPage.tsx | 161 ++++++--- src/components/ProgressBarDetailPage.tsx | 102 ++++-- src/components/ScrollProgress.tsx | 4 +- src/components/SliderDetailsPage.tsx | 168 ++++++--- src/components/SpeedDialDetailsPage.tsx | 133 ++++--- src/components/ToastGenerator.tsx | 5 +- src/components/ToastPage.tsx | 177 +++++---- 22 files changed, 1502 insertions(+), 1056 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0d51088..68e4004 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3731,7 +3731,6 @@ "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz", "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==", "license": "MIT", - "peer": true, "dependencies": { "@babel/code-frame": "^7.10.4", @@ -3751,9 +3750,7 @@ "version": "4.3.0", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "license": "MIT", - "peer": true, "dependencies": { "color-convert": "^2.0.1" @@ -3769,9 +3766,7 @@ "version": "5.3.0", "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz", "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==", - "license": "Apache-2.0", - "peer": true, "dependencies": { "dequal": "^2.0.3" @@ -3781,9 +3776,7 @@ "version": "4.1.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", - "license": "MIT", - "peer": true, "dependencies": { "ansi-styles": "^4.1.0", @@ -3800,9 +3793,7 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "license": "MIT", - "peer": true, "dependencies": { "color-name": "~1.1.4" @@ -3815,18 +3806,14 @@ "version": "1.1.4", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "license": "MIT", - "peer": true }, "node_modules/@testing-library/dom/node_modules/has-flag": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "license": "MIT", - "peer": true, "engines": { "node": ">=8" @@ -3836,9 +3823,7 @@ "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "license": "MIT", - "peer": true, "dependencies": { "has-flag": "^4.0.0" @@ -4180,15 +4165,6 @@ "@types/node": "*" } }, - "node_modules/@types/hoist-non-react-statics": { - "version": "3.3.5", - "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz", - "integrity": "sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==", - "dependencies": { - "@types/react": "*", - "hoist-non-react-statics": "^3.3.0" - } - }, "node_modules/@types/html-minifier-terser": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz", @@ -4372,16 +4348,6 @@ "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.3.tgz", "integrity": "sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==" }, - "node_modules/@types/styled-components": { - "version": "5.1.34", - "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.34.tgz", - "integrity": "sha512-mmiVvwpYklFIv9E8qfxuPyIt/OuyIrn6gMOAMOFUO3WJfSrSE+sGUoa4PiZj77Ut7bKZpaa6o1fBKS/4TOEvnA==", - "dependencies": { - "@types/hoist-non-react-statics": "*", - "@types/react": "*", - "csstype": "^3.0.2" - } - }, "node_modules/@types/stylis": { "version": "4.2.5", "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz", @@ -6895,9 +6861,7 @@ "version": "2.0.3", "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==", - "license": "MIT", - "peer": true, "engines": { "node": ">=6" @@ -9184,19 +9148,6 @@ "he": "bin/he" } }, - "node_modules/hoist-non-react-statics": { - "version": "3.3.2", - "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", - "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", - "dependencies": { - "react-is": "^16.7.0" - } - }, - "node_modules/hoist-non-react-statics/node_modules/react-is": { - "version": "16.13.1", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" - }, "node_modules/hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -18832,9 +18783,7 @@ "version": "3.23.8", "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz", "integrity": "sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==", - "license": "MIT", - "funding": { "url": "https://github.com/sponsors/colinhacks" } diff --git a/src/App.tsx b/src/App.tsx index ed9a9f4..bd82d25 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,16 +1,13 @@ import React from 'react'; - +import { useState, useEffect } from 'react'; import { BrowserRouter as Router, Route, Routes, useLocation, } from 'react-router-dom'; - -import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; import ScrollProgressBar from './components/ScrollProgress'; // Import your ScrollProgressBar component import PricingDetailPage from './components/PricingDetailPage'; - import GlassyUILandingPage from './components/GlassyUILandingPage'; import GlassyUIComponentsPage from './components/GlassyUIComponentsPage'; import ButtonDetailsPage from './components/ButtonDetailsPage'; @@ -39,72 +36,122 @@ import ContactUsDetailsPage from './components/ContactUsDetailsPage'; import PaginationDetails from './components/PaginationDetails'; import TestimonialDetails from './components/TestimonialDetails'; import Footer from './components/Footer'; - import ProductCardDetailsPage from './components/ProductCardDetailsPage'; - import Statistic from './components/StatisticDetails'; - import GalleryDetailsPage from './components/GalleryDetailsPage'; - import Checkbox from './components/Checkbox'; - - import SpinnerDetailsPage from './components/SpinnerDetailsPage'; +import ProductCardDetailsPage from './components/ProductCardDetailsPage'; +import Statistic from './components/StatisticDetails'; +import GalleryDetailsPage from './components/GalleryDetailsPage'; +import Checkbox from './components/Checkbox'; +import SpinnerDetailsPage from './components/SpinnerDetailsPage'; + +const App: React.FC = () => { + const [darkMode, setDarkMode] = useState(true); // Initial state for dark mode + + useEffect(() => { + // Check localStorage for the saved theme preference + const savedTheme = localStorage.getItem('theme'); + if (savedTheme === 'dark') { + setDarkMode(true); + document.documentElement.classList.add('dark'); + } else { + document.documentElement.classList.remove('dark'); + } + }, []); + + // Toggle between dark and light modes + const toggleDarkMode = () => { + setDarkMode(prevMode => !prevMode); + if (!darkMode) { + document.documentElement.classList.add('dark'); + localStorage.setItem('theme', 'dark'); + } else { + document.documentElement.classList.remove('dark'); + localStorage.setItem('theme', 'light'); + } + }; - const App: React.FC = () => { return ( -
- {/* Add the ScrollProgressBar component here */} +
+ {' '} + {/* Add the ScrollProgressBar component here */} - } /> - } /> - } /> - } /> - } /> + } /> + } + /> + } /> + } + /> + } + /> } + element={} /> } /> - } /> - } /> + } + /> + } + /> } /> } /> - } /> - } /> - } /> + } + /> + } + /> + } + /> } /> - } /> + } + /> } /> } /> } /> } /> - } /> - - } /> - } /> + } + /> + } /> + } /> } /> } /> } /> - } /> - } /> - - - } /> - } /> + } /> + } /> - - } /> - - } /> + } /> + } /> - } /> - + } /> - + } /> + } /> + + ); }; -const ConditionalFooter: React.FC = () => { +const ConditionalFooter: React.FC<{ darkMode: boolean }> = ({ darkMode }) => { const location = useLocation(); - return location.pathname === '/' ?