Resolve "Fix: Improve Theme Consistency, Dark Mode Visibility, and Accessibility Across Frontend"
Description
This MR improves frontend theme handling, enhances Dark Mode visibility, removes UI redundancies, and updates related tests to maintain stability and accessibility compliance.
Changes Included
- Theme Toggle Refactor
Simplified ThemeToggle to support only Light and Dark modes.
Removed the “System” mode and associated monitor icon.
Improved state handling and removed unnecessary logic complexity.
Updated accessibility labels to describe the action (e.g., “Switch to light theme”) for better screen reader support.
- Dark Mode Visibility Fix
Added a global CSS update in index.css to improve visibility of the native date picker indicator (input[type="date"]) in Dark Mode.
Ensures expiry date fields (e.g., Add Medicine form) are clearly visible and usable.
- UI Cleanup
Removed duplicate ThemeToggle from ManageDoctorsPage.
Standardized theme control through the global AppLayout toggle.
Prevents inconsistent theme behavior and redundant UI elements.
- Test Updates
Updated unit tests to reflect the new 2-mode toggle behavior.
Adjusted expected labels and logic.
Ensured all pre-commit hooks and CI pipelines pass.
Impact
- Improved accessibility and screen reader clarity
- Better Dark Mode usability
- Cleaner, more consistent UI
- Reduced complexity in theme management
- Maintained full test reliability