add change theme dark/light button with react redux

src/App.jsx

@@ -1,4 +1,5 @@
 import { createBrowserRouter, RouterProvider } from 'react-router-dom'
+import { useSelector } from 'react-redux'
 
 import HomePage from "./pages/HomePage"
 import BlogPage from './pages/BlogPage'
@@ -20,8 +21,12 @@ 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'
+
 	return (
-		<div className='bg-slate-800 text-white min-h-screen'>
+		<div className={`${appThemeClass} bg-slate-800 text-white min-h-screen`}>
 			<RouterProvider router={router} />
 		</div>
 	)

src/components/ThemeButton.jsx

@@ -0,0 +1,16 @@
+import { useDispatch } from "react-redux"
+import { toggleTheme } from "../store/themeSlice"
+
+function ThemeButton() {
+    const dispatch = useDispatch()
+
+    return (
+        <navbar className="absolute right-8">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6 hover:cursor-pointer" onClick={() => dispatch(toggleTheme())}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
+            </svg>
+        </navbar>
+    )
+}
+
+export default ThemeButton

src/main.jsx

@@ -1,10 +1,16 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+
+import { Provider } from 'react-redux'
+import { store } from './store/store.js'
+
 import App from './App.jsx'
 import './index.css'
 
 createRoot(document.getElementById('root')).render(
 	<StrictMode>
-		<App />
+		<Provider store={store}>
+			<App />
+		</Provider>
 	</StrictMode>,
 )

src/pages/BlogPage.jsx

@@ -1,6 +1,8 @@
 import { useParams } from "react-router-dom"
 
-import { blogContents } from "../seed/data";
+import Navbar from "../components/ThemeButton"
+
+import { blogContents } from "../seed/data"
 
 function BlogPage() {
     const { blogTitle } = useParams();
@@ -10,6 +12,7 @@ function BlogPage() {
     if (fullBlogData) {
         return (
             <div className="flex justify-center">
+                <Navbar />
                 <div className="w-9/12 py-4 md:p-12">
                     <h1 className="text-3xl md:text-5xl font-bold">{fullBlogData.blogTitle}</h1>
                     <div className="flex justify-between md:px-8 mt-5 md:mt-8">

src/pages/HomePage.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 
 import Card from "../components/Card"
 import Footer from "../components/Footer"
+import Navbar from "../components/ThemeButton"
 
 import { blogContents } from "../seed/data"
 
@@ -47,6 +48,7 @@ function HomePage() {
 
     return (
         <div className="p-4 md:p-20 pb-4">
+            <Navbar />
             <div className="md:flex md:justify-between md:align-middle">
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-11 md:size-20 h-40 md:h-80 w-40 md:w-80 md:mr-32 order-1 md:order-2 mx-auto">
                     <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5M12 17.25h8.25" />

src/store/store.js

@@ -0,0 +1,8 @@
+import { configureStore } from '@reduxjs/toolkit';
+import themeReducer from './themeSlice';
+
+export const store = configureStore({
+    reducer: {
+        theme: themeReducer
+    }
+})

src/store/themeSlice.js

@@ -0,0 +1,19 @@
+import { createSlice } from '@reduxjs/toolkit'
+
+const initialState = {
+    theme: 'dark'
+};
+
+const themeSlice = createSlice({
+    name: 'theme',
+    initialState,
+    reducers: {
+        toggleTheme: (state) => {
+            state.theme = state.theme === 'light' ? 'dark' : 'light';
+        }
+    }
+})
+
+export const { toggleTheme } = themeSlice.actions;
+
+export default themeSlice.reducer