1
|
import { createSlice } from '@reduxjs/toolkit'
|
2
|
import { persistReducer } from 'redux-persist'
|
3
|
import storage from 'redux-persist/lib/storage'
|
4
|
import { PaletteMode } from '@mui/material'
|
5
|
|
6
|
export interface ThemeState {
|
7
|
paletteMode: PaletteMode
|
8
|
}
|
9
|
|
10
|
const persistConfig = {
|
11
|
key: 'theme',
|
12
|
storage, // localStorage for browsers
|
13
|
}
|
14
|
|
15
|
const initialState: ThemeState = {
|
16
|
paletteMode: 'light',
|
17
|
}
|
18
|
|
19
|
const themeSlice = createSlice({
|
20
|
name: 'theme',
|
21
|
initialState,
|
22
|
reducers: {
|
23
|
toggleTheme: (state) => ({
|
24
|
...state,
|
25
|
paletteMode: state.paletteMode === 'light' ? 'dark' : 'light',
|
26
|
}),
|
27
|
},
|
28
|
})
|
29
|
|
30
|
const themeReducer = persistReducer(persistConfig, themeSlice.reducer)
|
31
|
// const themeReducer = themeSlice.reducer
|
32
|
export const { toggleTheme } = themeSlice.actions
|
33
|
export default themeReducer
|