Skip to content

FIXED ISSUE #84 : Added Global Theme Toggle (Dark/Light Mode Support) #85

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

FIXED ISSUE #84 : Added Global Theme Toggle (Dark/Light Mode Support) #85

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
48ae16e
feat(theme): implement global dark/light mode support with persistent…
Stonebanks-js Oct 16, 2025
15a44c5
Merge branch 'main' into main
Stonebanks-js Oct 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 19 additions & 1 deletion package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

14 changes: 14 additions & 0 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<!doctype html>
<html lang="en" class="dark">
Copy link

Copilot AI Oct 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Suggested change
<html lang="en" class="dark">
<html lang="en">

Copilot uses AI. Check for mistakes.
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#0f172a" />
<title>Scratchpad Scribe</title>
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
</head>
<body class="bg-background text-foreground min-h-screen">
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
Copy link

Copilot AI Oct 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copilot uses AI. Check for mistakes.
</body>
</html>
33 changes: 17 additions & 16 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,30 +3,31 @@ import { Toaster as Sonner } from "@/components/ui/sonner";
import { TooltipProvider } from "@/components/ui/tooltip";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { ThemeProvider } from "@/components/theme/provider";
import Index from "./pages/Index";
import NotFound from "./pages/NotFound";
import { CurrentUserProvider } from "@/context/CurrentUserContext";
Copy link

Copilot AI Oct 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Suggested change
import { CurrentUserProvider } from "@/context/CurrentUserContext";

Copilot uses AI. Check for mistakes.


const queryClient = new QueryClient();

const App = () => {
return (
<QueryClientProvider client={queryClient}>
<TooltipProvider>
<Toaster />
<Sonner />
<CurrentUserProvider>
<BrowserRouter>
<Routes>
<Route path="/" element={<Index />} />
<Route path="*" element={<NotFound />} />
</Routes>
</BrowserRouter>
</CurrentUserProvider>
</TooltipProvider>
</QueryClientProvider>
)
<QueryClientProvider client={queryClient}>
<ThemeProvider defaultTheme="system" themeStorageKey="vite-ui-theme">
<TooltipProvider>
<Toaster />
<Sonner />
<BrowserRouter>
<Routes>
<Route path="/" element={<Index />} />
{/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
<Route path="*" element={<NotFound />} />
</Routes>
</BrowserRouter>
Comment on lines +20 to +26
Copy link

Copilot AI Oct 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Suggested change
<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>

Copilot uses AI. Check for mistakes.
</TooltipProvider>
</ThemeProvider>
</QueryClientProvider>
);
};

export default App;
Loading