[Feature] Add dark mode functionality to the website

[Manishak798]

Description

Implementing dark mode functionality in the website will ease the user's switch between the modes and enhance the user experience. I am a SWOC'24 Mentor raising this issue for contributors.

Screenshots

No response

Checklist

• [X] I have checked the existing issues.
• [X] I follow Contributing Guidelines of this project.
• [ ] I am a IWOC'24 contributor.
• [ ] I am a JWOC'24 contributor.
• [ ] I am a SWOC'24 contributor.

Code of Conduct

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

[Yuvraj960]

@Rakesh9100, @Manishak798, Can you please elaborate this issue. As I think the CalcDiverse Website is already designed in the Dark Mode. I think we have to choose a darker wallpaper of the website to make it whole Dark Mode without altering anything else. Yes I think, We can implement the Light Mode for the Website. Please address me regarding this.

[Manishak798]

@Rakesh9100, @Manishak798, Can you please elaborate on this issue. I think the CalcDiverse Website is already designed in the Dark Mode. I think we have to choose a darker wallpaper for the website to make it whole Dark Mode without altering anything else. Yes I think, We can implement the Light Mode for the Website. Please address me regarding this.

We need to implement a light mode functionality on the website and also if you can you should consider changing the background for the main landing page.

[Yuvraj960]

Ok @Manishak798 , I will implement it, assign this to me under SWOC24

[Rakesh9100]

Complete your assigned issues quickly and efficiently so that you can be assigned and move on to other issues @Yuvraj960

[SohanRC]

@Rakesh9100 Please assign me this issue under JWOC 2024.

[Yuvraj960]

@Rakesh9100, I am completing my issues as fast as possible as I need to merge more and more PRs.

[Yuvraj960]

You can Assign me two issues at once also so that there is no time wastage from my end when my one PR is under review.

[Rakesh9100]

Proceed @Yuvraj960

[Yuvraj960]

@Rakesh9100, I have found the perfect light background for the website, just suggest me should I change the design of the cards also, as rest everything I am changing.

If you take my opinion, then no changes are needed in the cards, but if you think any possible changes can be done in the cards in this background, then please let me know.

[Rakesh9100]

Looks good. You may proceed with making color adjustments to the text as much as possible as long it is visually appealing @Yuvraj960

[Gokilp]

please assign to me

[Rakesh9100]

Do you want to be assigned under GSSoC @Gokilp

[Rakesh9100]

Go ahead @Premonvitha-Sai

[Rakesh9100]

Are you working @Premonvitha-Sai

[DiwareNamrata23]

I'm interested to work on this issue . I request @Rakesh9100 to assign this issue to me

[Gokilp]

Im interested working the issue please asssign to me

[Rakesh9100]

It's not clear properly, pls make video by screen recording by showing both the modes light and dark nicely and by scrolling all the pages @Premonvitha-Sai

[Premonvitha-Sai]

I have add this background for light mode

[Gokilp]

please assign to me

[Premonvitha-Sai]

@Rakesh9100 could you please label the issue with level 1,2,3. It would be really helpful.

[Rakesh9100]

Can you clarify which is the light and which one is the dark mode by changing the toggle icon to something good such as sun and moon @Premonvitha-Sai

[Rakesh9100]

Create your PR, will check the deploy preview and suggest changes if needed @Premonvitha-Sai

[Premonvitha-Sai]

@Rakesh9100 I have created PR.

[Rakesh9100]

Do you want to work @DiwareNamrata23

[DiwareNamrata23]

Yes

[Rakesh9100]

Pls share your brief idea on how will you implement dark mode on this website @DiwareNamrata23

[DiwareNamrata23]

In dark mode the whole website would be black or any dark color and the contents will be lighter so that it will get easier to see also where will be color gradient I will try to match out with light smoothing colors.

[Rakesh9100]

Sure, go ahead and show me @DiwareNamrata23

[Rakesh9100]

Provide your PR @DiwareNamrata23

[DiwareNamrata23]

@Rakesh9100 Providing the pr by today itself