aswi2022code-of-duty-gitlab/frontend/src/features/Theme/themeSlice.ts @ main

import { createSlice } from '@reduxjs/toolkit'
import { persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage'
import { PaletteMode } from '@mui/material'

// State of the theme - controls whether the theme is dark or light
export interface ThemeState {
    paletteMode: PaletteMode
}

const persistConfig = {
    key: 'theme',
    storage, // localStorage for browsers
}

const initialState: ThemeState = {
    paletteMode: 'light',
}

const themeSlice = createSlice({
    name: 'theme',
    initialState,
    reducers: {
        toggleTheme: (state: any) => ({
            ...state,
            paletteMode: state.paletteMode === 'light' ? 'dark' : 'light',
        }),
    },
})

const themeReducer = persistReducer(persistConfig, themeSlice.reducer)
// const themeReducer = themeSlice.reducer
export const { toggleTheme } = themeSlice.actions
export default themeReducer