Fix/dark mode text visibility

[rahul-vyas-dev]

---

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

📝 Description

This pull request resolves an issue where text was not visible when the website was viewed in dark theme.
The problem occurred because certain text elements were inheriting light-theme colors and did not adapt to the dark background, resulting in extremely low readability.

The fix ensures:

• Proper color contrast in dark mode
• Text adjusts correctly on theme change
• Improved accessibility and UI consistency

Updated styles were added to the affected component(s) to make sure text is always clearly readable in both themes.

Fixes #544

🔄 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

Screenshots / GIFs

**Before**

After

🧪 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. Switch between dark/light themes — text remains readable

2. Refresh page — theme styles persist correctly

3. Navigate back to markdown-test page — colors remain consistent

♿ Accessibility

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

If further UI improvements are needed for markdown pages, I am available to continue contributing.
A PR will be created for more enhancements if required.

---

📚 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. 👏

[rahul-vyas-dev]

Hey @sa-fw-an, please take a look at this PR whenever you get time 😊😊. Let me know if any changes or improvements are needed — I’ll update them right away.