1
|
import { createTheme, Theme } from '@mui/material/styles'
|
2
|
import { AnyAction } from 'redux'
|
3
|
import { persist } from '../../utils/statePersistence'
|
4
|
|
5
|
export interface ThemeState {
|
6
|
theme: Theme
|
7
|
themeType: 'Light' | 'Dark'
|
8
|
}
|
9
|
|
10
|
const statePersistName = 'theme'
|
11
|
|
12
|
const initialTheme = createTheme({
|
13
|
palette: {
|
14
|
mode: 'light'
|
15
|
},
|
16
|
typography: {
|
17
|
fontFamily: [
|
18
|
'-apple-system',
|
19
|
'BlinkMacSystemFont',
|
20
|
'"Segoe UI"',
|
21
|
'Roboto',
|
22
|
'"Helvetica Neue"',
|
23
|
'Arial',
|
24
|
'sans-serif',
|
25
|
'"Apple Color Emoji"',
|
26
|
'"Segoe UI Emoji"',
|
27
|
'"Segoe UI Symbol"',
|
28
|
].join(','),
|
29
|
}
|
30
|
})
|
31
|
const initialState: ThemeState = {
|
32
|
theme: initialTheme,
|
33
|
themeType: 'Light',
|
34
|
}
|
35
|
|
36
|
export enum ThemeStateActions {
|
37
|
TOGGLE_THEME = 'TOGGLE_THEME',
|
38
|
SET_LIGHT_MODE = 'SET_LIGHT_MODE',
|
39
|
SET_DARK_MODE = 'SET_DARK_MODE',
|
40
|
}
|
41
|
|
42
|
const themeReducer = (state: ThemeState = initialState, action: AnyAction) => {
|
43
|
// TODO add all the actions
|
44
|
switch (action.type) {
|
45
|
case ThemeStateActions.TOGGLE_THEME:
|
46
|
return persist(statePersistName, state)
|
47
|
|
48
|
default:
|
49
|
return state
|
50
|
}
|
51
|
}
|
52
|
|
53
|
export default themeReducer
|