Update light/dark theme button to light/dark/system theme dropdown #29

[RachanaRane]

This PR introduces a theme dropdown menu to replace the existing theme button. The dropdown allows users to select between Light, Dark, and System theme options. The following updates have been made:

1. Theme Dropdown Menu: Replaces the previous theme button with a dropdown menu.
2. Icons:
   • Sun icon for Light theme
   • Moon icon for Dark theme
3. Functionality:
   • Light Mode: Switches to light mode and closes the dropdown upon selection.
   • Dark Mode: Switches to dark mode and closes the dropdown upon selection.
   • System Mode: Adapts to the system's theme settings.
4. Dropdown Behavior: The dropdown closes automatically after a selection is made.

Changes Made

• Replaced the theme button with a dropdown menu in the UI.
• Implemented theme switching functionality:
  • Light Mode: Activated using the sun icon.
  • Dark Mode: Activated using the moon icon.
  • System Mode: Adapts based on the system's theme settings.

Related Issues

• Issue #29

Screenshots

Testing

• Verified that theme switching works correctly for Light, Dark, and System modes.
• Ensured the dropdown closes after making a selection.
• Tested across different browsers and devices for consistent behavior.

Additional Notes

• Please review the changes to ensure they align with the project's theme and style guidelines.
• Feedback on the implementation and any additional improvements are welcome.

Thank you for reviewing this PR!

---

Author: Rachana Rane Date: 27-08-24

[satnaing]

This issue has been closed due to inactivity. If you believe this was done by mistake or would like to continue the discussion, please feel free to leave a comment or reopen it. Thank you for your understanding!