changed ui for mode toggle

[cherylpinto]

📝 Description

This PR updates the Dark Mode Toggle component with a modern, animated design using the lucide-react Sun and Moon icons. The toggle now features:

• Smooth animated transitions between light and dark modes.
• Hover effects with subtle scaling and shadow changes for better interactivity.
• Improved visual styling for light and dark modes, including gradient backgrounds and thumb effects.
• Accessibility enhancements with proper ARIA attributes.

These changes enhance the UI/UX, making the dark mode toggle more intuitive and visually appealing.

---

🔗 Related Issue

Fixes #470

---

🔄 Type of Change

• 🎨 UI/UX Update (visual changes, styling improvements)
• ♿ Accessibility Enhancement

---

📷 Visual Changes

Light Mode Toggle

Dark Mode Toggle

Video

SugarLabs.and.1.more.page.-.Personal.-.Microsoft_.Edge.2025-10-06.21-36-15.mp4

Mobile View

---

🧪 Testing Performed

📱 Browser Compatibility

• Chrome (tested latest version)
• Firefox (tested latest version)
• Safari
• Edge

🖥️ Responsive Design

• Desktop (1200px+)
• Tablet (768px - 1199px)
• Mobile (320px - 767px)

✅ Test Cases

1. Switching between light and dark modes updates the DOM and localStorage correctly.
2. Hover effects trigger scaling and gradient changes.
3. Sun and Moon icons transition smoothly with opacity and rotation.

---

♿ Accessibility

• ARIA labels added (role="switch", aria-checked, aria-label).
• Keyboard navigation works correctly (focusable button).
• Color contrast tested for light and dark modes.

---

📋 PR Checklist

• My code follows the project's coding style guidelines
• I have tested these changes locally
• My changes generate no new warnings or console errors
• All existing tests pass successfully

---

💭 Additional Notes

This update focuses solely on enhancing the toggle UI. No functional logic was changed besides minor DOM updates and style enhancements.

[github-actions]

❌ Checks Failed

Status: 🚫 Not ready to merge

Please fix the following issues before merging:

📝 Code Linting Failed

Issue: Code formatting or style violations detected.

Specific problems:

• Code formatting issues detected

How to fix:

Platform	Command	Description
🐧 Unix/macOS/Linux	npm run format	Auto-fix all formatting issues
🪟 Windows	npm run format:file <filename>	Fix specific files
🔍 Check Only	npm run format:check	Check formatting without fixing

Need help with linting? Check out the Linting Guide for Windows Users for detailed instructions.

---

🛠️ Next Steps

1. Fix the issues mentioned above
2. Test locally to ensure everything works
3. Push your fixes to this branch
4. Wait for re-check - This bot will automatically run again

🤖 This comment will be updated automatically when you push new commits

[github-actions]

🎉 All Checks Passed!

Status: ✅ Ready to merge

✅ Completed Workflows

Workflow	Status	Details
🔨 Continuous Integration	✅ Passed	Build completed successfully
📝 Code Linting	✅ Passed	All formatting and style checks passed

---

🚀 This PR is ready for review and can be safely merged to main branch!

Great work! Your code meets all quality standards. 👏

[sa-fw-an]

@cherylpinto You can write a Blog Post on how you solved issues in SugarLabs. To have an Idea on how to write a Blog Post you can refer to this PR:

• Dark mode blog post #473