nayanhajare / MyProject

0 stars 0 forks source link

implementing the dark mode #1

Open nayanhajare opened 2 hours ago

nayanhajare commented 2 hours ago

Currently, the application only supports a light theme. Users have requested the addition of a dark mode to improve usability in low-light environments. This issue is to track the implementation of the dark mode feature.

Steps to Reproduce Open the application in its current version. Notice that there is no option to switch between light and dark themes. Expected Behavior The user should be able to toggle between light mode and dark mode through a button or setting in the UI. The dark mode should apply to the entire app, adjusting background colors, text colors, and other UI elements to be easier on the eyes in low-light conditions. Actual Behavior The app only supports a light theme. Proposed Solution Add a toggle button in the settings or navbar to switch between light mode and dark mode. Use CSS or JavaScript to dynamically change the theme styles (background color, text color, etc.) when the user toggles the option. Store the user's preference in local storage or cookies to retain the theme setting between sessions. Additional Context It would be great to add an animation or smooth transition between the modes. Refer to CSS Media Query for prefers-color-scheme to detect the user's system-wide theme preference.