TheNinza / dsa-visualizer

https://dsa-visualizer.vercel.app
MIT License
2 stars 11 forks source link

Add a change to dark theme feature on navigation for both mobile and desktop views #5

Closed TheNinza closed 3 years ago

TheNinza commented 3 years ago

You can refer to this link https://mui.com/customization/dark-mode/ to get information on implementing dark mode toggle with material UI

rajdama commented 3 years ago

I can do it

TheNinza commented 3 years ago

@rajdama ... sure, go ahead

Sanket2055 commented 3 years ago

helllo sir , i would like to contribute , please allow me go ahead , Thank you!

TheNinza commented 3 years ago

@Sanket2055 sorry mate, I already assigned this issue. Do check other issues for contribution.

Sanket2055 commented 3 years ago

@Sanket2055 sorry mate, I already assigned this issue. Do check other issues for contribution.

okay sir , no problem

rajdama commented 3 years ago

@TheNinza Is it ok if I use redux to toggle between light and dark mode?

TheNinza commented 3 years ago

@TheNinza Is it ok if I use redux to toggle between light and dark mode?

I was thinking coz Material UI library has already been implemented, leveraging its capabilities should get the work done. Redux for just implementing dark theme might be a little over kill.

https://mui.com/customization/dark-mode/#toggling-color-mode

Check this one out for implementation with Material UI

rajdama commented 3 years ago

But here the problem is the toggle button is in navbar. First we have to store a state and based on its value if is true then we have to show dark mode and if it is false we have to show light mode. We must get this state at App.jsx as we have to pass in ThemeProvider as props which is not possible as the state is in navbar component. So I was thinking to use redux.

TheNinza commented 3 years ago

Yeahh now I get the idea behind using the redux completely. Yeah sure you can implement redux.

rajdama commented 3 years ago

Yeahh I will do that

rajdama commented 3 years ago

@TheNinza you can check I have added dark mode.