Skip to content

Commit

Permalink
Merge pull request #376 from coderashhar/toggleDarkMode
Browse files Browse the repository at this point in the history 
Light / Dark theme toggle button
  • Loading branch information
@Jaishree2310
Jaishree2310 authored Nov 4, 2024
2 parents df5b381 + b2c09fc commit 737bf4a
Show file tree
Hide file tree
Showing 37 changed files with 3,130 additions and 1,731 deletions.
127 changes: 89 additions & 38 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@

import React, { Suspense, lazy, useState, useEffect } from 'react';
import {
BrowserRouter as Router,
Expand All @@ -6,7 +7,9 @@ import {
useLocation,
} from 'react-router-dom';


// Import components that don't need to be lazy-loaded

import Header from './components/Header';
import Footer from './components/Footer';
import ScrollProgressBar from './components/ScrollProgress';
Expand Down Expand Up @@ -74,13 +77,39 @@ const ThemeToggle: React.FC = () => {
);
};

// Conditional Footer component
const ConditionalFooter: React.FC = () => {
const ConditionalFooter: React.FC<{ darkMode: boolean }> = ({ darkMode }) => {
const location = useLocation();
return location.pathname === '/' ? <Footer /> : null;
return location.pathname === '/' ? <Footer darkMode={darkMode} /> : null;
};

const App: React.FC = () => {
const [darkMode, setDarkMode] = useState(true); // Initial state for dark mode

//const ThemeToggle: React.FC = () => {
// const [theme, setTheme] = useState(localStorage.getItem('theme') || 'light');


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');
}
};
return (
<Router>
<Header />
Expand All @@ -90,43 +119,65 @@ const App: React.FC = () => {
<ScrollProgressBar />
<Suspense fallback={<div>Loading...</div>}>
<Routes>
<Route path="/" element={<GlassyUILandingPage />} />
<Route path="/components" element={<GlassyUIComponentsPage />} />
<Route path="/toast-page" element={<ToastPage />} />
<Route path="/button-details" element={<ButtonDetailsPage />} />
<Route path="/card-details" element={<CardDetailsPage />} />
<Route path="/progress-bar-details" element={<ProgressBarDetailPage />} />
<Route path="/pricing-details" element={<PricingDetailPage />} />
<Route path="/popup-details" element={<PopupDetailPage />} />
<Route path="/input-details" element={<InputDetailPage />} />
<Route path="/textarea-details" element={<TextareaDetailPage />} />
<Route path="/tooltip-details" element={<TooltipDetailsPage />} />
<Route path="/speed-dial-details" element={<SpeedDialDetailsPage />} />
<Route path="/modal-details" element={<ModalDetailsPage />} />
<Route path="/navigation-details" element={<NavigationDetailsPage />} />
<Route path="/generator" element={<GlassMorphismGenrator />} />
<Route path="/slider-details" element={<SliderDetailsPage />} />
<Route path="/back-to-top-details" element={<BackToTopDetailsPage />} />
<Route path="/dropdown-details" element={<DropdowndetailsPage />} />
<Route path="/authentication-card" element={<AuthenticationCard />} />
<Route path="/accordion-details" element={<AccordionDetails />} />
<Route path="/contributors" element={<ContributorsPage />} />
<Route path="/donate" element={<DonationPage />} />
<Route path="/about" element={<AboutUsPage />} />
<Route path="/contact-details" element={<ContactUsDetailsPage />} />
<Route path="/pagination-details" element={<PaginationDetails />} />
<Route path="/testimonial-details" element={<TestimonialDetails />} />
<Route path="/calendar-details" element={<CalendarDetails />} />
<Route path="/checkbox" element={<Checkbox checked={false} onChange={() => {}} label="Sample Checkbox" />} />
<Route path="/statistic-details" element={<Statistic />} />
<Route path="/gallery-details" element={<GalleryDetailsPage />} />
<Route path="/spinner" element={<SpinnerDetailsPage />} />
<Route path="/product-details" element={<ProductCardDetailsPage />} />

<Route path='/' element={<GlassyUILandingPage darkMode={darkMode}/>} />
<Route path='/components' element={<GlassyUIComponentsPage darkMode={darkMode}/>} />
<Route path='/toast-page' element={<ToastPage darkMode={darkMode}/>} />
<Route path='/button-details' element={<ButtonDetailsPage darkMode={darkMode}/>} />
<Route path='/card-details' element={<CardDetailsPage darkMode={darkMode}/>} />
<Route
path='/progress-bar-details'
element={<ProgressBarDetailPage darkMode={darkMode}/>}
/>
<Route path='/pricing-details' element={<PricingDetailPage darkMode={darkMode}/>} />
<Route path='/popup-details' element={<PopupDetailPage darkMode={darkMode}/>} />
<Route path='/input-details' element={<InputDetailPage darkMode={darkMode}/>} />
<Route path='/textarea-details' element={<TextareaDetailPage darkMode={darkMode}/>} />
<Route path='/tooltip-details' element={<TooltipDetailsPage darkMode={darkMode}/>} />
<Route
path='/speed-dial-details'
element={<SpeedDialDetailsPage darkMode={darkMode}/>}
/>
<Route path='/modal-details' element={<ModalDetailsPage darkMode={darkMode}/>} />
<Route
path='/navigation-details'
element={<NavigationDetailsPage darkMode={darkMode}/>}
/>
<Route path='/generator' element={<GlassMorphismGenrator darkMode={darkMode}/>} />
<Route path='/slider-details' element={<SliderDetailsPage darkMode={darkMode}/>} />
<Route
path='/back-to-top-details'
element={<BackToTopDetailsPage />}
/>
<Route path='/dropdown-details' element={<DropdowndetailsPage darkMode={darkMode}/>} />
<Route path='/authentication-card' element={<AuthenticationCard /darkMode={darkMode}>} />
<Route path='/accordion-details' element={<AccordionDetails darkMode={darkMode}/>} />
<Route path='/contributors' element={<ContributorsPage darkMode={darkMode}/>} />
<Route path='/donate' element={<DonationPage darkMode={darkMode}/>} />
<Route path='/about' element={<AboutUsPage darkMode={darkMode}/>} />
<Route path='/contact-details' element={<ContactUsDetailsPage darkMode={darkMode}/>} />
<Route path='/pagination-details' element={<PaginationDetails darkMode={darkMode} />} />
<Route path='/testimonial-details' element={<TestimonialDetails darkMode={darkMode}/>} />
<Route path='/calendar-details' element={<CalendarDetails />} />
<Route
path='/checkbox'
element={
<Checkbox
checked={false}
onChange={() => {}}
label='Sample Checkbox'
/>
}
/>
<Route path='/statistic-details' element={<Statistic darkMode={darkMode}/>} />
<Route path='/gallery-details' element={<GalleryDetailsPage darkMode={darkMode}/>} />
<Route path='/spinner' element={<SpinnerDetailsPage darkMode={darkMode}/>} />
<Route path='/product-details' element={<ProductCardDetailsPage darkMode={darkMode}/>} />
<Route path='*' element={<NotFoundPage darkMode={darkMode}/>} />
<Route path="/survey" element={<SurveyForm />} />
<Route path="*" element={<NotFoundPage />} />
</Routes>
</Suspense>
<ConditionalFooter />
<ConditionalFooter darkMode={darkMode}/>
</Router>
);
};
Expand Down
Loading

0 comments on commit 737bf4a

Please sign in to comment.