BUG:Dark Mode Toggle Not Functioning on Click #117
Description
Is there an existing issue for this?
- I have searched the existing issues
What happened?
📌 Issue Overview
Clicking the Dark Mode toggle in the application does not activate the dark theme. The switch appears clickable, but the UI remains in light mode with no visible theme change.
🔍 Steps to Reproduce
- Open the application in the browser
- Locate the Dark Mode toggle (usually in the navbar or settings)
- Click on the toggle
- Observe that the UI does not change to dark theme
🎯 Expected Behavior
When the user clicks the Dark Mode toggle, the entire application's theme should switch to dark mode — including background colors, text, buttons, and all UI components.
🚨 Actual Behavior
Clicking the toggle does not apply the dark theme.
- The UI stays in light mode
- No dark styles are applied
- Possibly, the
.darkclass is not added to the<html>or<body>element
📷 Video
(https://drive.google.com/file/d/1omK7LRKXDlA25ovgpZ_ujdKrX5fTMI1e/view?usp=sharing)
💡 Suggested Improvements
- Ensure that clicking the toggle triggers a state change in the app’s theme context or global state
- Confirm that the
.darkclass (for Tailwind or CSS-based dark themes) is being properly added to the root element - If using Tailwind CSS, verify that
darkMode: 'class'is set intailwind.config.js - Persist the theme selection in localStorage (optional improvement)
🙋♂️ I'd love to work on this and submit a fix. Please assign this issue to me.
Record
- I agree to follow this project's Code of Conduct
- I want to work on this issue