BUG:BUG: Dark Mode Toggle Not Functioning on Click #195
Description
Is there an existing issue for this?
- I have searched the existing issues
What happened?
📌 Issue Overview
The dark mode toggle button is not functioning. Users cannot switch between light mode, dark mode, and system theme preferences. The theme toggle component exists but clicking on it produces no effect, and theme preferences are not saved or applied to the application.
🔍 Steps to Reproduce
Go to the application home page or any page with the navigation header
Click on the Sun/Moon icon (theme toggle button) in the top navigation bar
Attempt to select "Light", "Dark", or "System" from the dropdown menu
See that nothing happens - the theme does not change
🎯 Expected Behavior
The theme toggle dropdown menu should open when clicked
Users should be able to select between "Light", "Dark", and "System" theme options
The selected theme should be applied immediately to the entire application
The UI should change to reflect the selected theme (light colors for light mode, dark colors for dark mode)
The theme preference should be saved to browser's localStorage
The saved theme preference should persist across page refreshes and browser sessions
When "System" is selected, the app should respect the user's OS-level theme preference
🚨 Actual Behavior
Clicking the theme toggle button has no visible effect
The dropdown menu may or may not appear
Selecting a theme option does not change the application's appearance
No theme is applied to the application
Theme preference is not saved to localStorage
Application always displays in default theme regardless of user preference or system theme
💡 Suggested Improvements
Root Causes Identified
1️⃣ Variable Shadowing Bug in theme-provider.tsx
The internal React state setter was named setTheme, which conflicted with the context's setTheme method.
Due to this naming collision, the state update never executed when the toggle was clicked.
Fix: Rename the state setter to setThemeState to avoid shadowing the context method.
2️⃣ ThemeProvider Missing in main.tsx
The ThemeProvider was not wrapping the main component.
As a result, useTheme() inside ModeToggle had no context, causing the toggle to stop functioning.
Fix: Wrap the component with ThemeProvider in main.tsx.
Record
- I agree to follow this project's Code of Conduct
- I want to work on this issue