FIXED ISSUE #84 : Added Global Theme Toggle (Dark/Light Mode Support) #85
Conversation
|
@Stonebanks-js is attempting to deploy a commit to the Dhanush Nehru's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
@DhanushNehru I created this pull request before you assigned me the issue number #84, kindly assign me and add hacktoberfest 2025 labels before chekiong this PR Also If any changes have to made, I am open to resolve the conflicts. Thank you |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull Request Overview
Adds global theme toggling (dark/light) with persistence across sessions by introducing a ThemeProvider and an HTML shell for Tailwind darkMode: 'class'.
- Wraps the app with ThemeProvider to enable system/default theming and persistence.
- Adds an index.html shell with Tailwind-compatible classes and Vite entry script.
- Removes CurrentUserProvider wrapper, which likely breaks user context availability.
Reviewed Changes
Copilot reviewed 2 out of 3 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| src/App.tsx | Introduces ThemeProvider and restructures provider tree; removes CurrentUserProvider wrapper. |
| public/index.html | Adds Vite HTML shell with dark mode class and root mount; currently placed under public. |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| <BrowserRouter> | ||
| <Routes> | ||
| <Route path="/" element={<Index />} /> | ||
| {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */} | ||
| <Route path="*" element={<NotFound />} /> | ||
| </Routes> | ||
| </BrowserRouter> |
There was a problem hiding this comment.
Removing the CurrentUserProvider wrapper disconnects any consumers of CurrentUserContext and will break features that rely on current user state. Please reintroduce the provider around the router (or the entire app) to restore context.
| <BrowserRouter> | |
| <Routes> | |
| <Route path="/" element={<Index />} /> | |
| {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */} | |
| <Route path="*" element={<NotFound />} /> | |
| </Routes> | |
| </BrowserRouter> | |
| <CurrentUserProvider> | |
| <BrowserRouter> | |
| <Routes> | |
| <Route path="/" element={<Index />} /> | |
| {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */} | |
| <Route path="*" element={<NotFound />} /> | |
| </Routes> | |
| </BrowserRouter> | |
| </CurrentUserProvider> |
| </head> | ||
| <body class="bg-background text-foreground min-h-screen"> | ||
| <div id="root"></div> | ||
| <script type="module" src="/src/main.tsx"></script> |
There was a problem hiding this comment.
Vite expects index.html at the project root to act as the HTML entry; placing it under public means Vite won't process it, and the app won't boot via this template. Move this file to the project root (./index.html) and remove/avoid duplicates under public.
| @@ -0,0 +1,14 @@ | |||
| <!doctype html> | |||
| <html lang="en" class="dark"> | |||
There was a problem hiding this comment.
Hardcoding class="dark" forces dark mode and conflicts with defaultTheme="system" (and can cause a visible flash before ThemeProvider runs). Remove the hardcoded class and let ThemeProvider (or an inline no-FOUC script) manage the initial theme class on the root element.
| <html lang="en" class="dark"> | |
| <html lang="en"> |
| import { ThemeProvider } from "@/components/theme/provider"; | ||
| import Index from "./pages/Index"; | ||
| import NotFound from "./pages/NotFound"; | ||
| import { CurrentUserProvider } from "@/context/CurrentUserContext"; |
There was a problem hiding this comment.
CurrentUserProvider is imported but no longer used in this file after removing the wrapper, which may trigger lint errors and increases noise. Either re-add the provider (recommended) or remove this unused import.
| import { CurrentUserProvider } from "@/context/CurrentUserContext"; |
your branch is giving this error in local take a frsh pull from main and merge it with your branch and re run it and please upload a screen recording of the functionalty |
3 participants
🧩 Summary
FIXES #84
This pull request introduces a global theme system with persistent dark/light mode functionality.
It enhances user experience by allowing seamless theme switching across the app and retaining preference between sessions.
🛠️ Changes Made
✅ Verification Steps