Added dark mode functionality to the website

[Yuvraj960]

Fixes Issue🛠️

Closes #515

Description👨‍💻

Added the changes needed for introducing the light mode for the website. Introduced the toggle switch in the navbar

Type of change📄

• New feature (Light mode for the website)

Checklist✅

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I am an Open Source Contributor

Screenshots/GIF📷

[github-actions]

Hey @Yuvraj960, Welcome to the project CalcDiverse! 🎊
Thanks for your contribution! Your effort makes this project better. Keep it up! 🙌
Please wait for the PR to be reviewed. Happy Coding!! ✨

[netlify]

✅ Deploy Preview for calcdiverse ready!

Name	Link
🔨 Latest commit	f3cf17a
🔍 Latest deploy log	https://app.netlify.com/sites/calcdiverse/deploys/65d9897bdc3d240008e9ba0c
😎 Deploy Preview	https://deploy-preview-588--calcdiverse.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[Rakesh9100]

Pls work on these:

1. Just make your changes and no indentation or any other changes in index.html file or any of the files.

2. Use some good animation or better theme toggling button.

Update the colors in the light theme of this text.

Modify the text colors as it is conflicting with the white background and not visible properly!!

@Yuvraj960

[Rakesh9100]

Any update on this PR @Yuvraj960

[Yuvraj960]

Work going on @Rakesh9100 , actually time gone for choosing the perfect colors for the font, found that. Now implementing on whole website. And for the animation of the toggle, I am looking for a JS file which will do this work for us. Will attach the screenshots tomorrow showing the progress of the Light mode in the PR

[Rakesh9100]

Okay, carry on @Yuvraj960

[Yuvraj960]

@Rakesh9100, please view the changes.
I have modified the code in accordance with changes stated by you above.

[Rakesh9100]

The animation which is added is lagging as you can also check the deploy preview.

Pls implement a good toggling button as mentioned before.

First mentioned change is not fixed as still unnecessary indentation changes are shown, if you are unable to then you can leave it and I will fix it but work on first 2 changes. @Yuvraj960

[Yuvraj960]

@Rakesh9100, first of all very sorry for the indentation issue. I didn't know how to resolve it.
And secondly my animation is not lagging as I have checked in the deploy preview also:

Recording.2024-02-19.184128.mp4

And can you please elaborate me, that what do you meant by the "good toggling button"? I am still stuck in this.

[Rakesh9100]

Okay, leave the indentation part. I will see it.

Animation change is lagging sometimes not every time.

Change the toggling button means implement some buttons like for examples:

1. Check this sun and moon toggling design here.
2. You can check this.
3. Check different toggling design effects here.

You can go with any one of these or any similar kind of button instead of using a simple toggle button. Hope this clears your doubt!! @Yuvraj960

[Yuvraj960]

@Rakesh9100, I have made the new switch button, kindly check its implementation. I hope with the most recent commit I have done in the button, you like this type of presentation now.

[Rakesh9100]

1. Remove the animation of the website when changing the theme. I am not talking about the button, but the animation. Theme should change immediate when button is clicked.
2. Reduce the size of the button slightly.
3. This button should be present in every page navbars such as Contributors, FAQ, and Contact.
4. Once we change the theme let's say in home page, it should change the theme for the entirely website for every pages.

@Yuvraj960

[Yuvraj960]

Ok @Rakesh9100 , I understand all changes you need in the website, as there are many changes to be done in the website, It will take time, but I ensure you, I will give my best.

Kindly assign me one of my another issues in this project, as I have to work on them also along with this issue in progress.

[Rakesh9100]

Sure @Yuvraj960

[Rakesh9100]

Are you working @Yuvraj960

[Yuvraj960]

Yes @Rakesh9100 I am working, due to my weekend exam, I didn't replied

[Yuvraj960]

@Rakesh9100, I need some help in this issue. Actually I am unable to understand the structure of the website.
I have implemented the first 2 changes you demanded.
But while adding the button to all the navbars, I am encountering an unknown issue.
The issue is that navbar size is not fixed, it varies on different pages. I came to know about this issue when I added the dark-light switch button in all the navbars. The margins and paddings are not uniform through all website navbars.
While I was fixing the size of my button, the rest navbar button just left shift to an arbitrary place.

Can you please to some Favour for me.
Can you please open a separate issue for matching the light mode for the whole website,
And I merge the PR for the topic under Home-Page_Dark-Light_Theme-Design?

I am saying this only because I am unable to understand the file structure of the website, that which element of the website is contributing in which way to the pages of the website.

I can design the light mode for all the pages and write the code for them also, only problem is with linking of those pages, that I am currently confused in, how to do it.

[Yuvraj960]

@Rakesh9100 , please address me regarding this issue.