Redesign Dark Mode Toggle Button for Better User Experience #470

[Pranav92005]

---

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

📝 Description

This PR redesigns the Dark Mode Toggle Button to improve user experience.
The toggle now has a smaller, cleaner design with a smooth sliding knob.
It also updates the color scheme:

• Light mode: Sky teal track, yellow sun knob
• Dark mode: Dark blue track, light blue moon knob

The toggle works seamlessly with the theme system

This improves visual clarity and usability for switching between dark and light modes.

---

🔗 Related Issue

Fixes #470

---

🔄 Type of Change

• 📱 New Feature (new page, component, or functionality)
• 🎨 UI/UX Update (visual changes, styling improvements)
• 📖 Content Update (text changes, documentation)
• 🐛 Bug Fix
• ⚡ Performance Improvement
• ♿ Accessibility Enhancement
• 🔒 Security Update
• 📦 Dependency Update
• 🧹 Code Refactoring
• 🧪 Test Updates

---

📷 Visual Changes

Dark Mode Toggle Button

---

🧪 Testing Performed

📱 Browser Compatibility

• Chrome (Version: )
• Firefox (Version: )
• Safari (Version: )
• Edge (Version: )
• Mobile Chrome (Device: )
• Mobile Safari (Device: )

🖥️ Responsive Design

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

✅ Test Cases

1. Dark mode enabled correctly and persists after reload.
2. Light mode enabled correctly and persists after reload.
3. Toggle knob moves smoothly between positions.

---

♿ Accessibility

• Proper heading hierarchy maintained
• ARIA labels added where needed
• Color contrast requirements met
• Keyboard navigation works correctly
• Screen reader testing performed

---

📋 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 added tests that prove my fix/feature works
• All existing tests pass successfully
• I have checked for and resolved any merge conflicts
• I have optimized images/assets (if applicable)
• I have validated all links are working correctly

---

💭 Additional Notes

• This redesign focuses only on toggle button UI and color scheme, without affecting other components.
• Future improvements can include animated sun/moon icons for enhanced user experience.

---

📚 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

[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]

Issue fixed in PR:

• changed ui for mode toggle #471

Thanks for trying