added draft of useDarkMode

[teradaian]

Some ideas, obviously the button would ideally be a toggle within settings. I'm setting this to draft so you can look at the structure change ideas.

So far:

• Installed Styled Components
• useDarkMode hook to toggle between modes
• Theme controlled globally for scaling

Still needs:

• styles on Home.js need to be accessible by globalStyles, as Home.css are. This would require some refactoring afaik.
• MUI bg and text elements still static
• Button would ideally be in a nav or settings, and a toggle

Hopefully the idea is helpful even if it's to decide you don't want to do it this way at all!

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/stephin007/cowin-vaccine-availablity-checker/5dPceGcDMxtc8kxyCrqcTFE3GXZg
✅ Preview: https://cowin-vaccine-git-fork-teradaian-newbranch-ste-15a738.vercel.app

[stephin007]

hey @teradaian this looks good, but

• can you use an icon for the toggle
• Also, when switched to light mode, other colors in the app should change as well.
• Placement of the button should be in a different place to have better UI experience

Regarding, the changes you suggested!

• does the refactoring include any permanent/temporary breakage?

[Justinnn07]

hey @teradaian , please hold for a while, as we are changing the UI ..

Thanks

[devpenzil]

In the light mode please change the input colors also. its more suitable

[stephin007]

hey @AJOALEX012 @teradaian we have been working on the new UI , and its still in progress, we would like to have your ideas for that!

If you wish to add more features in the new UI , say the dark mode feature, PLease pull the Latest NEW-UI branch to contribute

[teradaian]

I'll take a look!

[teradaian]

Hey folks,

new UI looks nice! had some questions about what your plan is re: styling, now that you've refactored some things. Were you looking to convert entirely to styled components, convert existing CSS to JSS, or try to keep everything css that can be?

I think that for global themes to work as a lm/dm solution, styled comp or at least jss functionality will make life easier in the long run, but ultimately it's not my project and it's a bit of a general overhaul to current design so figured I should check.
It is possible to do entirely in CSS, of course!

[stephin007]

hey @teradaian i understand your point, yes we are looking for a better solution for the long run! So its better to use Global styled components .

Please let me know

• how much work is that,
• what all components will be effected by the changes.
• Will it affect people parallely working on the project

[stephin007]

Also @teradaian , i would suggest you to create a new Pull request in which your base will be the NEW-UI Branch.

[teradaian]

• how much work is that,
• what all components will be effected by the changes.
• Will it affect people parallely working on the project

Global styled components would be, afaik, quite a bit of a rework as you'ld be directly converting a lot of styling to individual components. That would be, likely, outside of the scope of what I can help with. But could be a cool overall solution for you guys if you'll want to heavily use them moving forward.

In answer to your second question, it would need to affect most components in some way, vs using something like MUI's built in theme provider palette function? Which, for now, would be a much less invasive and quicker fix, although less versatile long run perhaps.

I'll close this old pull request now, sorry to keep posting on here- just was trying to follow this conversation through so I didn't forget anything.