107 lines
3.5 KiB
TypeScript
107 lines
3.5 KiB
TypeScript
import { createSlice, PayloadAction } from '@reduxjs/toolkit'
|
|
import * as styles from '../styles'
|
|
import { localStorageDarkModeKey, localStorageStyleKey } from '../config'
|
|
import { StyleKey } from '../interfaces'
|
|
|
|
interface StyleState {
|
|
asideStyle: string
|
|
asideScrollbarsStyle: string
|
|
asideBrandStyle: string
|
|
asideMenuItemStyle: string
|
|
asideMenuItemActiveStyle: string
|
|
asideMenuDropdownStyle: string
|
|
navBarItemLabelStyle: string
|
|
navBarItemLabelHoverStyle: string
|
|
navBarItemLabelActiveColorStyle: string
|
|
overlayStyle: string
|
|
darkMode: boolean
|
|
bgLayoutColor: string;
|
|
iconsColor: string;
|
|
activeLinkColor: string;
|
|
cardsColor: string;
|
|
focusRingColor: string;
|
|
corners: string;
|
|
cardsStyle: string;
|
|
linkColor: string;
|
|
websiteHeder: string;
|
|
borders: string;
|
|
shadow: string;
|
|
websiteSectionStyle: string;
|
|
textSecondary: string;
|
|
}
|
|
|
|
|
|
const initialState: StyleState = {
|
|
asideStyle: styles.superStarTheme.aside,
|
|
asideScrollbarsStyle: styles.superStarTheme.asideScrollbars,
|
|
asideBrandStyle: styles.superStarTheme.asideBrand,
|
|
asideMenuItemStyle: styles.superStarTheme.asideMenuItem,
|
|
asideMenuItemActiveStyle: styles.superStarTheme.asideMenuItemActive,
|
|
activeLinkColor: styles.superStarTheme.activeLinkColor,
|
|
asideMenuDropdownStyle: styles.superStarTheme.asideMenuDropdown,
|
|
navBarItemLabelStyle: styles.superStarTheme.navBarItemLabel,
|
|
navBarItemLabelHoverStyle: styles.superStarTheme.navBarItemLabelHover,
|
|
navBarItemLabelActiveColorStyle: styles.superStarTheme.navBarItemLabelActiveColor,
|
|
overlayStyle: styles.superStarTheme.overlay,
|
|
darkMode: true,
|
|
bgLayoutColor: styles.superStarTheme.bgLayoutColor,
|
|
iconsColor: styles.superStarTheme.iconsColor,
|
|
cardsColor: styles.superStarTheme.cardsColor,
|
|
focusRingColor: styles.superStarTheme.focusRingColor,
|
|
corners: styles.superStarTheme.corners,
|
|
cardsStyle: styles.superStarTheme.cardsStyle,
|
|
linkColor: styles.superStarTheme.linkColor,
|
|
websiteHeder: styles.superStarTheme.websiteHeder,
|
|
borders: styles.superStarTheme.borders,
|
|
shadow: styles.superStarTheme.shadow,
|
|
websiteSectionStyle: styles.superStarTheme.websiteSectionStyle,
|
|
textSecondary: styles.superStarTheme.textSecondary,
|
|
};
|
|
|
|
|
|
export const styleSlice = createSlice({
|
|
name: 'style',
|
|
initialState,
|
|
reducers: {
|
|
setDarkMode: (state, action: PayloadAction<boolean | null>) => {
|
|
state.darkMode = action.payload !== null ? action.payload : !state.darkMode
|
|
|
|
if (typeof localStorage !== 'undefined') {
|
|
localStorage.setItem(localStorageDarkModeKey, state.darkMode ? '1' : '0')
|
|
}
|
|
|
|
if (typeof document !== 'undefined') {
|
|
document.body.classList[state.darkMode ? 'add' : 'remove']('dark-scrollbars')
|
|
|
|
document.documentElement.classList[state.darkMode ? 'add' : 'remove'](
|
|
'dark-scrollbars-compat'
|
|
)
|
|
}
|
|
},
|
|
|
|
setStyle: (state, action: PayloadAction<StyleKey>) => {
|
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
// @ts-ignore
|
|
if (!styles[action.payload]) {
|
|
return
|
|
}
|
|
|
|
if (typeof localStorage !== 'undefined') {
|
|
localStorage.setItem(localStorageStyleKey, action.payload)
|
|
}
|
|
|
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
// @ts-ignore
|
|
const style = styles[action.payload]
|
|
|
|
for (const key in style) {
|
|
state[`${key}Style`] = style[key]
|
|
}
|
|
},
|
|
},
|
|
})
|
|
|
|
// Action creators are generated for each case reducer function
|
|
export const { setDarkMode, setStyle } = styleSlice.actions
|
|
|
|
export default styleSlice.reducer |