fix color combination between light or dark theme

src/App.jsx

@@ -23,10 +23,10 @@ const router = createBrowserRouter(
 function App() {
 	const theme = useSelector((state) => state.theme.theme)
 
-	const appThemeClass = theme === 'dark' ? 'bg-slate-800 text-white' : 'bg-white text-black'
+	const appThemeClass = theme === 'dark' ? 'bg-slate-800 text-white' : 'bg-slate-300 text-black'
 
 	return (
-		<div className={`${appThemeClass} bg-slate-800 text-white min-h-screen`}>
+		<div className={`${appThemeClass} min-h-screen`}>
 			<RouterProvider router={router} />
 		</div>
 	)

src/components/Card.jsx

@@ -1,4 +1,5 @@
 import { useNavigate } from 'react-router-dom'
+import { useSelector } from 'react-redux'
 import PropTypes from 'prop-types'
 
 function CardMenuList({shape, title}) {
@@ -29,13 +30,16 @@ function CardMenuBox() {
 
 function Card({id, isMenuActive, toggleDetail, blogTitle, blogWriter, writerPhotoProfile, blogImageUrl , blogWrittenDate}) {
     const navigate = useNavigate()
+    const theme = useSelector((state) => state.theme.theme)
+
+    const cardThemeClass = theme === 'dark' ? 'bg-slate-950 shadow-slate-600 hover:shadow-slate-400' : 'bg-slate-100 shadow-slate-400 hover:shadow-slate-200'
 
     const navigateDetail = () => {
         navigate(`/blog/${blogTitle}`)
     }
 
     return (
-        <div className="mx-auto blog-card bg-slate-950 rounded-lg w-80 m-4 shadow-lg shadow-slate-600 hover:cursor-pointer hover:shadow-slate-400 transition-shadow" onClick={navigateDetail}>
+        <div className={`mx-auto blog-card ${cardThemeClass} rounded-lg w-80 m-4 shadow-lg hover:cursor-pointer transition-shadow`} onClick={navigateDetail}>
             <img src={blogImageUrl} alt="Card image" className="min-w-full h-48 rounded-t-lg object-cover" />
             <div className="p-4">
                 <h1 className="blog-title font-bold">{blogTitle}</h1>