[BUG] Dark/LIght mode button is not functioning

[aniket05singh]

Description

1. Problem Statement
Currently, the website includes a button designed to toggle between light mode and dark mode, but the functionality is not working. This means users are unable to switch between different themes according to their preferences, which can negatively impact user experience. Light mode and dark mode are essential features for modern websites, as they provide users with the ability to select a theme that is most comfortable for them, based on lighting conditions or personal preference.

The absence of this functionality leaves the button inactive, leading to:

Reduced accessibility for users who prefer one theme over the other.
Limited personalization since users cannot switch to their desired visual preference.
Inconsistent user experience, especially on a website that promises such functionality but doesn't provide it.

2. Proposed Solution
To address this problem, I propose the following steps to implement a fully functional light mode/dark mode toggle for the website:

a) Detect User Preferences:
System-level detection: Leverage the prefers-color-scheme media query to detect whether the user prefers a light or dark theme based on their system settings.
Override with User Selection: Allow users to override this system preference by manually switching between light and dark modes through the theme toggle button.
b) Toggle Functionality:
Implement JavaScript (or relevant framework-specific methods) to switch between light and dark themes. This can be achieved by toggling a CSS class or updating local storage to remember the user's preference.

Please assign me this under SWOC

Screenshots

Any additional information?

No response

What browser are you seeing the problem on?

No response

[hirdeshds]

dear sir/mam please assign me this task under SWOC

[Mujtabaa07]

@aniket05singh Assigned