Add Full Dark Mode Support with Tailwind CSS v4 + ThemeContex

[Ashu-sCode]

Hey @Anujcodecraft 👋

I've just completed the Dark Mode implementation across your codebase — everything is working smoothly and adheres to the latest Tailwind CSS v4 standards.

🛠️ What’s Included in This PR:

• ✅ Added DarkMode toggle button in the Navbar
• ✅ Implemented ThemeContext for global theme state management
• ✅ Persisted theme preference using localStorage
• ✅ Applied dark mode styles across all files inside pages/ and other essential UI components
• ✅ Used Tailwind CSS v4 compliant method for dark mode:

@custom-variant dark (&:where(.dark, .dark *));

📂 Updated Files:

• ThemeContext.jsx (new file)
• Navbar.jsx (dark mode toggle)
• MainLayout.jsx
• Sidebar.jsx
• All components under the pages/ folder
• index.css for Tailwind’s dark variant support
• main.jsx wrapped dark mode

---

📽️ Video Demo:

👉 Click Here to Watch the Video

---

Thanks! 🙌

[netlify]

✅ Deploy Preview for manitstudyportal ready!

Name	Link
🔨 Latest commit	75e858b
🔍 Latest deploy log	https://app.netlify.com/projects/manitstudyportal/deploys/6889fa193f0b870008c30077
😎 Deploy Preview	https://deploy-preview-37--manitstudyportal.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 project configuration.

[Anujcodecraft]

@Ashu-sCode there are more issues if would love to contribute and there is another https://github.com/Jatin917/riverside-clone/
if you want to explore some good backend system and design related issues. BTW Thanks for your contribution!

[Anujcodecraft]

@Ashu-sCode


ig you made some changes which removing some required things like next button is removed, filters are also removed

[Ashu-sCode]

Hey @Anujcodecraft, thanks for the feedback!

The issues happened because I only ran the client locally, so I couldn’t see backend data or full features like filters and pagination. Sorry for the miss.

If possible, could you share a dummy login or test link? That would help me test properly before submitting the fix. I’ll start working on the correct version right away!

– Ashu

[Jatin917]

hello Ashu ig that would not be possible for us to provide the links as in that case i might need to provide db and others links which have our private data, in case you want to check comment out the sso inegration checks from the frontend and backend , make atlas db on mongodb , get the link from there and use it as shown in the .env.example sign in using otp (for that you just need an email and app password generated by google which can easily be made with help of GPT) and then change your role to "uploader" and insert some dummy data in there or if don't want to insert 6 data in one you can make changes to show only one data so that you can review the buttons and filters appearance.

[Ashu-sCode]

Hey @Anujcodecraft @Jatin917 , just to clarify could you please let me know which specific page or component the issue occurred on (where the filters or next button disappeared)? That’ll help me locate it quickly and make the correct fix. Thanks!

[Jatin917]

https://manitstudyportal.netlify.app/AllNotes

this is the route where issue occured and the file might be notespage ig.

[Ashu-sCode]

Thanks for the quick reply! Got it
I’ll check the /AllNotes route and review the NotesPage file for the missing filters and pagination button.