✨ Added Dark/Light Theme Toggle in NavBar with README Update #1587
Conversation
❌ Deploy Preview for reactplayio failed. Why did it fail? →
|
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey! contributor, thank you for opening a Pull Request 🎉.
@reactplay/maintainers will review your submission soon and give you helpful feedback.
If you're interested in continuing your contributions to open source and want to be a part of a welcoming and fantastic community, we invite you to join our ReactPlay Discord Community.
Show your support by starring ⭐ this repository. Thank you and we appreciate your contribution to open source!
Stale Marking : After 30 days of inactivity this issue/PR will be marked as stale issue/PR and it will be closed and locked in 7 days if no further activity occurs.
priyankarpal
left a comment
priyankarpal
left a comment
There was a problem hiding this comment.
another thing is
import error: 'SearchContext' is not exported from 'common/search/search-context' (imported as 'SearchContext').
|
|
||
| --- | ||
|
|
||
| ## 🌗 Dark/Light Theme Toggle | ||
|
|
||
| We’ve added a dark/light theme toggle to enhance user experience. | ||
|
|
||
| ### 🔧 How It Works | ||
|
|
||
| - A toggle button (☀️/🌙) is available in the **NavBar**. | ||
| - Clicking it switches between **light** and **dark** mode. | ||
| - Theme preference is saved in `localStorage` so it persists across sessions. | ||
| - Tailwind CSS uses `darkMode: 'class'` (configured in `tailwind.config.js`). | ||
| - A custom `useDarkMode` hook manages toggling logic and class updates. | ||
|
|
||
| ### 📂 Files Modified | ||
|
|
||
| - `src/common/NavBar.jsx` → Added toggle button | ||
| - `src/hooks/useDarkMode.js` → Custom hook for managing theme | ||
| - `src/index.jsx` → Ensures correct theme on initial load | ||
| - `tailwind.config.js` → Enabled `darkMode: 'class'` | ||
|
|
||
| ### 📸 Preview | ||
|
|
||
| | Light Mode ☀️ | Dark Mode 🌙 | | ||
| |---------------|--------------| | ||
| |  |  | | ||
|
|
||
| --- | ||
|
|
||
|
|
There was a problem hiding this comment.
these are not required, you can remove.
2 participants
Summary
This PR introduces a Dark/Light theme toggle to the existing ReactPlay project using Tailwind CSS with
darkMode: 'class'.✅ Changes Made:
NavBarcomponentuseDarkModecustom hook to manage theme preferences using localStorageindex.jsxto wrap the app in adivthat toggles thedarkclassREADME.mdto document the new dark/light theme feature and usage🔍 Preview
The UI now supports toggling between dark and light modes, enhancing accessibility and user experience.
Let me know if any improvements or changes are needed!