feat: implement CSS-variable theme management and dynamic search feed…

src/App.jsx

@@ -17,15 +17,13 @@ function App() {
 
   const[mode,setMode]=useState('light');
 
-  const toggleMode=()=>{
-    if(mode==='light'){
-      setMode('dark');
-      document.body.style.backgroundColor='#042743';
-    }
-    else{
-      setMode('light');
-      document.body.style.backgroundColor = '#fff';
-    }
+  const toggleMode = () => {
+    setMode(prevMode => (prevMode === 'light' ? 'dark' : 'light'));
+  };
+    // else{
+    //   setMode('light');
+    //   document.body.style.backgroundColor = '#fff';
+    // }
   }
 
   return (
@@ -48,6 +46,6 @@ function App() {
         </div>
       </>
   );
-}
+
 
 export default App;

src/assets/styles/App.css

@@ -1,13 +1,19 @@
-/* 
+
 .app-container.light {
-  background-color: white;
-  color: black;
-} */
+  --bg-color: #ffffff;
+  --text-color: #000000;
+}
 
-/* Dark mode styles */
 .app-container.dark {
-  background-color: #042743;
-  color: white;
+  --bg-color: #042743;
+  --text-color: #ffffff;
+}
+
+.app-container {
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  min-height: 100vh;
+  transition: all 0.3s ease;
 }
 
 

src/assets/styles/Books.css

@@ -29,6 +29,23 @@
     border: 2px solid #0aa5ff;
 }
 
+/* Container for search status messages */
+.search-status-container {
+    text-align: center;
+    margin: 20px 0;
+    font-family: 'Poppins', sans-serif;
+}
+
+.status-text {
+    font-size: 1.5rem;
+    color: var(--text-color);
+    text-transform: capitalize;
+    border-bottom: 2px solid #2ecc71;
+    display: inline-block;
+    padding-bottom: 5px;
+}
+
+
 @media (max-width: 900px) {
 
     .searchBook-div input {

src/pages/Books.jsx

@@ -45,6 +45,14 @@ const Books = ({mode,changeMode}) => {
                 />
             </div>
         </form>
+        {/* Container for search status messages */}
+        <div className="search-status-container">
+            {isLoading ? (
+                <h2 className="status-text">Searching for "{search}"...</h2>
+            ) : (
+                <h2 className="status-text">{searchResult}</h2>
+            )}
+        </div>
 
         <BookList/>
       <Footer/>

src/pages/Login.jsx

@@ -42,7 +42,7 @@ const Login=({mode,changeMode})=>{
     return (
         <div className='login-container'>
          <Navbar mode={mode} changeMode={changeMode}/>
-         <section className={`sectionclass {$mode}`}>
+         <section className={`sectionclass ${mode}`}>
             <form>
             <h1>Login</h1>
                 <label htmlFor="username">