Add Dark/Light Mode Feature

[Akash4701]

Is your feature request related to a problem? Please describe. Add the ability to switch between dark and light themes on the website. This feature will improve user experience, especially in low-light conditions.

Describe the solution you'd like 1.Define CSS variables for light and dark themes. 2.Create a React Context to manage the theme state globally. 3.Implement a component to toggle between light and dark themes. 4.Apply the selected theme in the necessary components. 5.Test the implementation across different pages and browsers.

Acceptance Criteria:

1.Users can switch between dark and light themes using a toggle button. 2.The selected theme persists across page reloads and sessions.

[Akash4701]

Please assign me this issue @Niharika0104 for SSoC'2024

[Yashop181]

Hi @Niharika0104 ,

I'll be working on implementing the dark and light theme toggle feature for our website using Redux Toolkit. Here's how I plan to proceed:

Define CSS Variables: I'll define CSS variables for both light and dark themes to ensure consistent styling across the site.

Create Redux Slice: I'll set up a Redux slice to manage the theme state globally. This will allow seamless switching between dark and light themes throughout the application.

Implement Toggle Component: I'll create a toggle button component that dispatches actions to update the theme state in Redux. This component will reflect the selected theme across the application.

Apply Theme Across Components: I'll ensure that the selected theme is applied to all necessary components across different pages.

Persistence Across Sessions: To ensure a smooth user experience, I'll implement logic to persist the selected theme across page reloads and sessions using browser storage.

I'm excited to get started on this! If you have any suggestions or specific requirements, please let me know.