diff --git a/src/App.jsx b/src/App.jsx index 6e33fea..3560cc3 100644 --- a/src/App.jsx +++ b/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 ( -
+
) diff --git a/src/components/Card.jsx b/src/components/Card.jsx index 2be3b9e..47d6c53 100644 --- a/src/components/Card.jsx +++ b/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 ( -
+
Card image

{blogTitle}