Redesign DarkModeToggle: add animated switch with gradient and glow

[alirezhs]

---

name: Pull Request
about: Submit changes to the Sugar Labs website for review

📝 Description

This PR improves the existing DarkModeToggle button by redesigning it as a responsive animated switch with gradient, shadow, and subtle glow effects.
The toggle still preserves the original light/dark mode functionality, and no changes have been made to the overall website theme or colors.

🔗 Related Issue

Fixes #94

🔄 Type of Change

• 🎨 UI/UX Update (visual changes, styling improvements)
• ⚡ Performance Improvement (smooth animations, responsive design)

📷 Visual Changes

Screenshots / GIFs

• Dark Mode:
  
• Light Mode:
  

🧪 Testing Performed

📱 Browser Compatibility

• Chrome (Version: latest)
• Firefox (Version: latest)
• Safari (Version: latest)
• Edge (Version: latest)
• Mobile Chrome (Pixel 5)
• Mobile Safari (iPhone 13)

🖥️ Responsive Design

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

✅ Test Cases

1. Click the toggle to switch between light and dark mode.
2. Check animation is smooth on desktop and mobile.
3. Verify glow, gradient, and shadow effects render correctly.

♿ Accessibility

• Proper ARIA labels (role="switch" and aria-label) added
• Keyboard navigation works
• Color contrast requirements met
• Screen reader tested

📋 PR Checklist

• My code follows the project's coding style guidelines
• I have tested these changes locally
• I have updated the documentation accordingly
• My changes generate no new warnings or console errors
• I have optimized images/assets (if applicable)
• I have validated all links are working correctly

💭 Additional Notes

• No changes were made to other components or the overall theme.
• Focused only on redesigning the DarkModeToggle button for better UX and visuals.
• Fully compatible with mobile and desktop.

---

📚 Reviewer Resources

• Contributing Guide
• Style Guide
• Community Chat

Thank you for contributing to the Sugar Labs website! 🎉

[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

[sa-fw-an]

Issue fixed in PR:

• changed ui for mode toggle #471

Thanks for trying