code changes

app/theme-context.js

 "use client";
 import { createContext, useContext, useState, useEffect } from "react";
 import { useRouter, useSearchParams, usePathname } from "next/navigation";
+
 export const ThemeContext = createContext();
 
 export const useAppContext = () => useContext(ThemeContext);
@@ -16,19 +17,12 @@ export const ThemeProvider = ({ children }) => {
 
   useEffect(() => {
     const storedTheme = localStorage.getItem("theme");
-    setTheme(storedTheme);
-  }, [theme]);
+    setTheme(storedTheme || "light");
+  }, []);
+
   useEffect(() => {
-    if (!search) {
-      setText("");
-    } else {
-      setText(search);
-    }
-    if (pathName.includes("singleblog")) {
-      setIsDisabled(true);
-    } else {
-      setIsDisabled(false);
-    }
+    setText(search || "");
+    setIsDisabled(pathName.includes("singleblog"));
   }, [pathName, search]);
 
   const toggleTheme = () => {
@@ -36,15 +30,15 @@ export const ThemeProvider = ({ children }) => {
     localStorage.setItem("theme", newTheme);
     setTheme(newTheme);
   };
+
   const handleSearchInput = (value, currentPage) => {
     setText(value);
-
     const query = value
       ? `?page=${currentPage}&search=${value}`
       : `?page=${currentPage}`;
-
     router.push(query, undefined, { shallow: true });
   };
+
   const contextValue = {
     theme,
     toggleTheme,

components/top-level/single-blog/styles.module.css

@@ -6,6 +6,7 @@
 .blog-list ul {
   padding: 0rem 2.3rem;
 }
+
 .blogContent {
   padding: 1rem;
   border-radius: 15px;
@@ -107,6 +108,12 @@
   .tag {
     gap: 1rem;
   }
+  .title {
+    padding-inline-start: 0.5em;
+  }
+  .blogList ul li {
+    padding-inline-start: 1.5em;
+  }
 }
 @media screen and (min-width: 1440px) {
   .container {
@@ -120,4 +127,8 @@
   .blogList ul {
     margin-top: 1rem;
   }
+  .title,
+  .blogList ul li {
+    padding-inline-start: 0em;
+  }
 }