Here are steps: –
1.
- Create a folder “theme” under src>redux
- Create a file “themeSlice.js” inside “theme” folder
themeSlice.js:
import {createSlice} from ‘@reduxjs/toolkit’
const initialState={
theme:‘light’
};
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;
2.
Add themeReducer in store.js –
import themeReducer from ‘./theme/themeSlice.js’
const rootReducer=combineReducers({
user:userReducer,
theme:themeReducer
})
3.
Create a component “ThemeProvider.jsx” –
import {useSelector} from ‘react-redux’
const ThemeProvider = ({children}) => {
const {theme}=useSelector((state)=>state.theme);
return (
<div className={theme}>
<div className=‘ bg-white text-gray-700 dark:text-gray-200 dark:bg-[rgb(16, 23, 42)]’ >
{children}
</div>
</div>
)
}
export default ThemeProvider
4. Add ThemeProvider in main.jsx –
import ThemeProvider from ‘./components/ThemeProvider.jsx’
<ThemeProvider>
<App />
</ThemeProvider>
5. In Header.jsx import useDispatch –
import {useSelector, useDispatch} from ‘react-redux’
import {toggleTheme} from ‘../redux/theme/themeSlice.js’
const dispatch=useDispatch();
6. Add onClick on theme Change icon in Header.jsx-
import {FaMoon, FaSun} from ‘react-icons/fa’
<Button className=‘hidden sm:inline’ color=‘gray’ pill onClick={()=>dispatch(toggleTheme())}>
{
theme===‘light’ ? <FaSun/> : <FaMoon/>
}
</Button>
