FEATURE: Dark mode

[vatsalsinghkv]

Related Issue

Implementation of dark mode

Closes: #778

Description of Changes

• Added CSS variables for dark theme in gloabals.css.
• Created a use-theme hook with context for using themes.
• Wrote logic for storing current mode in local storage.
• Changed the component's hardcoded colour with dark theme CSS variables

Checklist:

• [x] My code adheres to the established style guidelines of this project.
• [x] I have conducted a self-review of my code.
• [ ] I have included comments in areas that may be difficult to understand.
• [ ] I have made corresponding updates to the project documentation.
• [x] My changes have not introduced any new warnings.

Screenshots

Original	Updated

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
grabtern-frontend	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 4, 2023 4:30am

[github-actions[bot]]

Thank you, @vatsalsinghkv, for creating this pull request and contributing to GitHub-ReadMe! Our review team will thoroughly review the pull request and will reach out to you soon! Please make sure you have marked all the completed tasks as done. We appreciate your patience and contribution!

[anmode]

Nice to see this pR: Firstly we need to have light theme on default Some minor UI issues needs to fixed:

and try to login into dashboard see for UI in dark mode there.... Rest all is good!

[vatsalsinghkv]

@anmode what do you think we invert this image in the dark mode?

[vatsalsinghkv]

@anmode I've tried to login but i didn't get verification email, do you have any testing login credentials for me to test out the dashboard

[anmode]

@anmode I've tried to login but i didn't get verification email, do you have any testing login credentials for me to test out the dashboard

please see readme... all dev emails goes to ethereal. you can find credentials to login into ethereal from readme! and yeah invert image look good!

[vatsalsinghkv]

@anmode is there a way to run google auth through the backend endpoints given in the .env, I tried loging in manually it didn't work got internal server error. But I fixed more pages like reset password, mentor registration pages to the darkmode in the last commit

[anmode]

@anmode is there a way to run google auth through the backend endpoints given in the .env, I tried loging in manually it didn't work got internal server error. But I fixed more pages like reset password, mentor registration pages to the darkmode in the last commit

if you want to login , through email you can login in dev mode but can't use google auth. Due to security purpose we can't to out the client ID. no worries you can create account!

wait please give me. your credentials which you created for your grabtern dev account?

[vatsalsinghkv]

@anmode sure, we can implement dark-mode on dashboard in the next PR, I think I've made the default theme as light in last commit, test it by deleting darkMode from local storage and refresh the page. Also while implementing dark-mode I've seen some UI visual errors should I fix them under this PR or should I create another issue for it?

[anmode]

Ok you can create next PR!.. can you give me your credentials so i can check what causing err to create grabtern account?

[vatsalsinghkv]

@anmode My account is working with production server, but with the demo server I am unable to login, it usually says my account is registered and password don't match. It while resetting it gives a server error, can you try creating an account and resetting its password with the demo server?

My credentials were: email: vatsalsinghkv@gmail.com password: i dont know or idontknow

[anmode]

oh yeah i see actually demo backend was not updated with mainstream so it ws causing the issue... so i fixed, your password is idontknow I see some pages needs rework in , i think you are mentioning those UI fix.. one main is loader in darkmode will be differenct.