Add dark mode

[RahulPrasadYadav]

Description

Dark mode reduces glare and minimizes eye strain, especially in low-light environments.
It softens the brightness of the screen, making it more comfortable to read for extended periods.

Screenshots

Checklist

• I have checked the existing issues.
• I follow Contributing Guidelines of this project.
• I am a SWOC'25 contributor.
• I am a KWOC'24 contributor.

Code of Conduct

• I agree to follow this project's "Code of Conduct".

[github-actions]

Hey @RahulPrasadYadav, Welcome to 💖TelMedSphere !!! 🎊
Thanks for opening an issue! 🙌 Please wait for the issue to get reviewed. If it is relevant, it will get assigned to you.
Happy Coding !!! ✨

[PratikMane0112]

Hey @RahulPrasadYadav, please give more information about, how you are going to implement this feature !!!!

[RahulPrasadYadav]

Use useState to toggle between light and dark modes.
Store the user’s theme preference in localStorage.
light and dark modes using CSS classes.
DarkModeToggle component to your main layout or navbar.

[PratikMane0112]

@RahulPrasadYadav Thanks for elaborating but Can you make it tailwind & use context API for toggling with UseState?

[RahulPrasadYadav]

yesss

[PratikMane0112]

Which page or component you are interested off ?

[RahulPrasadYadav]

i try to all page

[PratikMane0112]

Okay !!!! But be aware that

• codebase of website is huge & you should match color theme of website.
• You have to make it using the color palettes in color.js & and tailwind.config.js file.
• You must add toggle button in header, with functionality of it keeping same after login & log out.

Are you still ready then I can assign it to you ?

[RahulPrasadYadav]

Okey don't worry

[PratikMane0112]

Okay!!!! Try out for single page of About Us first !!!! Then then let me know, if you are continuing.....

[RahulPrasadYadav]

Okey thankk you

[Sakshamjain98]

Assign me this issue under iwoc

[PratikMane0112]

@Sakshamjain98 Thank you for your interest, please proceed. Also you can do it in chunks

[Sakshamjain98]

Should I split this work into the chunks like

1. Adding the dark mode at home page
2. Adding the dark mode at about page
   etc

So should I have to raise different issue?
Or make a pr for particular page
And when it get merge
Then start working of the dark mode of next component

[PratikMane0112]

No need to create diff issue each time but feel free to create a new PR each time for each page & mentioned this issue in all of those PR.

[Sakshamjain98]

Okay so each pr count seperately for the score count?

[PratikMane0112]

Okay so each pr count seperately for the score count?

Yes but that will depend on level of your work & contributions in codebase

[PratikMane0112]

You can refer tailwind.config & colors.js files for color schema

[Sakshamjain98]

Okay thanks

[Shiv10122003]

please assign issue to me under iwoc

[PratikMane0112]

please assign issue to me under iwoc

You can work but before confirm about which or component other contributors are working

[Shiv10122003]

okk apologies sir

[Shiv10122003]

#234 is updated one