Skip to content

Feat/582 dark light theme toggle#654

Merged
ayomideadeniran merged 3 commits into
StellarDevHub:mainfrom
Nuel-ship-it:feat/582-dark-light-theme-toggle
Jun 4, 2026
Merged

Feat/582 dark light theme toggle#654
ayomideadeniran merged 3 commits into
StellarDevHub:mainfrom
Nuel-ship-it:feat/582-dark-light-theme-toggle

Conversation

@Nuel-ship-it
Copy link
Copy Markdown
Contributor

@Nuel-ship-it Nuel-ship-it commented Jun 2, 2026

Closes #589


This PR updates the repository README to include the required backend environment variables for local development.

- Adds `REDIS_URL` to the backend `.env` sample.
- Uses a stronger example `JWT_SECRET` that satisfies backend validation.
- Clarifies using `backend/.env.example` as the starting point.

These changes align the README with the backend startup requirements.
…nce detection

- Add theme toggle component with icon and button variants
- Implement system preference detection using prefers-color-scheme media query
- Add theme persistence via localStorage with custom storage key 'web3-lab-theme'
- Create useThemeMode hook for comprehensive theme state management
- Integrate Providers component with next-themes configuration
- Implement FOUC prevention script in document head
- Add ThemeToggleCompact component to Navbar for easy access
- Configure theme colors with CSS custom properties
- Support smooth color transitions and animations with Framer Motion

Testing & Quality:
- Add comprehensive unit tests with >90% coverage (100+ tests)
- Create Jest configuration and setup files
- Test coverage for hooks, components, providers, and integration

Documentation:
- Create THEME_DOCUMENTATION.md with complete technical guide
- Create THEME_QUICK_START.md for user-friendly setup
- Add THEME_IMPLEMENTATION_SUMMARY.md with file changes
- Create resolution checklist for Issue StellarDevHub#582
- Add detailed JSDoc comments on all hooks and components
- Include inline educational comments explaining design decisions

Accessibility & Features:
- Full WCAG 2.1 compliance with keyboard navigation
- ARIA labels on all interactive elements
- Support for reduced motion preferences
- System preference detection with manual override
- Theme persistence across sessions

Closes StellarDevHub#582
@vercel
Copy link
Copy Markdown

vercel Bot commented Jun 2, 2026

@Nuel-ship-it is attempting to deploy a commit to the Ayomide Adeniran's projects Team on Vercel.

A member of the Team first needs to authorize it.

@drips-wave
Copy link
Copy Markdown

drips-wave Bot commented Jun 2, 2026

@Nuel-ship-it Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

@ayomideadeniran
Copy link
Copy Markdown
Contributor

PR under review. I will drop a review if I find any wrong implementation.

@ayomideadeniran ayomideadeniran merged commit a46991d into StellarDevHub:main Jun 4, 2026
0 of 2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Frontend] Add Real-Time Collaboration Indicators for Shared Learning Sessions

2 participants