theme toggle button added

[Shreedevi07]

📝 Pull Request Description

Related Issue

Closes #7054

Summary

This PR introduces a modern Dark/Light Theme Toggle Switch with improved UI consistency for the Button UI Collection page. It enhances user experience with a minimal iOS-style toggle, fixes visibility issues in dark mode, and improves overall visual separation between UI sections.

Type of Change

• 🐛 Bug fix (non-breaking change which fixes an issue)
• ✨ New project addition
• 🚀 New feature or UI/UX enhancement
• ♻️ Code refactoring / clean-up
• 📝 Documentation update
• ⚙️ GitHub Workflow automation or DX improvements

---

🛠️ Changes Made

Implemented CSS-variable based dark/light theme system
Added modern toggle switch (pill + sliding knob UI)
Fixed issue where moon icon was not visible in dark mode
Corrected z-index layering for toggle knob and icons
Ensured toggle does not resize or shift layout on state change
Improved dark mode section styling with subtle grey borders
Updated dark theme to use true black background (#000 / #111)
Fixed script execution timing issue causing toggle malfunction
Improved overall UI consistency across sections and buttons

🧪 Testing and Verification

Local Validation

• I have run node scripts/validateProjects.js locally and it passed with zero errors.

Browser Compatibility Check

• Tested and verified in Google Chrome
• Tested and verified in Mozilla Firefox
• Tested and verified in Safari / Microsoft Edge

Responsive & Accessibility Checks

• Verified responsive layout on Mobile viewports (using DevTools)
• Verified responsive layout on Tablet viewports
• Keyboard navigation and focus outlines checked
• Semantic HTML and ARIA labels checked

---

📷 Screenshots / Video Recording

toggle button added

---

🤝 Contributor Checklist

• My code follows the code 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 have updated the documentation / README files accordingly.
• My changes generate no new warnings or console errors.
• There are no unrelated changes or formatter noise in this PR.

[vercel]

@Shreedevi07 is attempting to deploy a commit to the Dhairya Gothi 's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. In the meantime, please ensure that your changes align with our CONTRIBUTING.md. If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊