Enhancement | Light / Dark Mode

[vverma022]

Pull Request Title

Dark/Light Mode Implementation

Description

Implements Dark mode for the website with the use of Shadcn UI. Also makes Appbar responsive when viewing in smaller sized screens.

Resolves #150

Linked Issues

• Fixes #[Issue Number]
• Closes #159

Type of Change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)

Changes

• Added custom text and background utility classes which can be used in the future for designing the ui without writing css colour properties.
• Implemented a dark/light mode toggle using Shadcn ui which lets you switch between 3 options Dark,Light and System default.
• Changed the Appbar ti make it responsive when using the website in a smaller screen

Screenshots/Recordings

https://github.com/aadeshkulkarni/figuringout/assets/109036913/18242c20-fba4-4448-804e-166d34e001fe

Checklist before requesting a review

• [x] I have performed a self-review of my code
• [x] I assure there are no similar/duplicate pull requests regarding the same issue
• [x] My changes follow the project's coding guidelines and best practices
• [x] Code is formatted properly and lint check passes successfully
• [ ] I have made corresponding changes to the documentation (if applicable)

Additional Notes

[vercel[bot]]

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

Name	Status	Preview	Comments	Updated (UTC)
medium-app	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 30, 2024 3:46pm

[aadeshkulkarni]

@vverma022 - npm build fails

[vverma022]

@vverma022 - npm build fails

I have some dependencies not installed ?

[aadeshkulkarni]

@vverma022 - npm build fails

I have some dependencies not installed ?

You need to run the npm run build command on the frontend project to check & fix errors.

[aadeshkulkarni]

1. The border color for dark mode is very light. It's creating a bad UX. Can you please keep the border to border-slate-800 from border-gray-200 ?
2. Dark mode: The default text color can be a darker shade across the app. text-gray-100/200 / text-slate-100/200

[vverma022]

1. The border color for dark mode is very light. It's creating a bad UX. Can you please keep the border to border-slate-800 from border-gray-200 ?

2. Dark mode: The default text color can be a darker shade across the app. text-gray-100/200 / text-slate-100/200

Alright will implement these changes