✨ Added Dark/Light Theme Toggle in NavBar with README Update

README.md

@@ -395,6 +395,37 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
   </tbody>
 </table>
 
+
+---
+
+## 🌗 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 🌙 |
+|---------------|--------------|
+| ![Light](https://dummyimage.com/300x150/ffffff/000000&text=Light+Mode) | ![Dark](https://dummyimage.com/300x150/000000/ffffff&text=Dark+Mode) |
+
+---
+
+
 <!-- markdownlint-restore -->
 <!-- prettier-ignore-end -->
 

src/index.jsx

@@ -1,6 +1,6 @@
 import RouteDefs from 'common/routing/RouteDefs';
 import { SearchContextProvider } from 'common/search/search-context';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 import reportWebVitals from './reportWebVitals';
 import register from './registerServiceWorker';
@@ -27,33 +27,47 @@ const Index = () => {
     language: []
   });
 
+  const [theme, setTheme] = useState(localStorage.getItem('theme') || 'light');
+
+  // Effect to apply theme
+  useEffect(() => {
+    const root = document.documentElement;
+    if (theme === 'dark') {
+      root.classList.add('dark');
+    } else {
+      root.classList.remove('dark');
+    }
+    localStorage.setItem('theme', theme);
+  }, [theme]);
+
+  const toggleTheme = () => {
+    setTheme(prev => (prev === 'dark' ? 'light' : 'dark'));
+  };
+
   const value = {
     searchTerm,
     setSearchTerm,
     filterQuery,
     setFilterQuery,
     showShareModal,
-    setShowShareModal
+    setShowShareModal,
+    toggleTheme, // add toggle function to context if needed in NavBar
+    theme
   };
 
   return (
-    // <React.StrictMode>
     <ErrorBoundry>
       <SearchContextProvider value={value}>
         <RouteDefs />
         <Notification />
       </SearchContextProvider>
     </ErrorBoundry>
-    // </React.StrictMode>
   );
 };
+
 const container = document.getElementById('root');
 createRoot(container).render(<Index />);
 
 // Makes the app to work offline and load faster
 register();
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 reportWebVitals();