sajad-dev/Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UPDATE

Browse Source
This commit is contained in:
Mohammad Sajad Pourajam
2026-03-26 23:38:05 +03:30
parent 93215a7366
commit c297bcf407
5 changed files with 39 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/@core/components/customizer/index.tsx
+10 -4
View File
@@ -40,7 +40,7 @@ import DirectionLtr from '@core/svg/DirectionLtr'
import DirectionRtl from '@core/svg/DirectionRtl' import DirectionRtl from '@core/svg/DirectionRtl'
// Config Imports // Config Imports
import primaryColorConfig from '@configs/primaryColorConfig' import primaryColorConfig, { DEFAULT_PRIMARY_COLOR_PALETTE_ID } from '@configs/primaryColorConfig'
// Hook Imports // Hook Imports
import { useSettings } from '@core/hooks/useSettings' import { useSettings } from '@core/hooks/useSettings'
@@ -62,6 +62,8 @@ const getLocalePath = (pathName: string, locale: string) => {
return segments.join('/') return segments.join('/')
} }
const defaultPrimaryColor =
primaryColorConfig.find(item => item.id === DEFAULT_PRIMARY_COLOR_PALETTE_ID)?.main ?? primaryColorConfig[0].main
type DebouncedColorPickerProps = { type DebouncedColorPickerProps = {
settings: Settings settings: Settings
@@ -74,7 +76,7 @@ const DebouncedColorPicker = (props: DebouncedColorPickerProps) => {
const { settings, isColorFromPrimaryConfig, handleChange } = props const { settings, isColorFromPrimaryConfig, handleChange } = props
// States // States
const [debouncedColor, setDebouncedColor] = useState(settings.primaryColor ?? primaryColorConfig[0].main) const [debouncedColor, setDebouncedColor] = useState(settings.primaryColor ?? defaultPrimaryColor)
// Hooks // Hooks
useDebounce(() => handleChange('primaryColor', debouncedColor), 200, [debouncedColor]) useDebounce(() => handleChange('primaryColor', debouncedColor), 200, [debouncedColor])
@@ -82,12 +84,16 @@ const DebouncedColorPicker = (props: DebouncedColorPickerProps) => {
return ( return (
<> <>
<HexColorPicker <HexColorPicker
color={!isColorFromPrimaryConfig ? (settings.primaryColor ?? primaryColorConfig[0].main) : '#eee'} // color={!isColorFromPrimaryConfig ? (settings.primaryColor ?? primaryColorConfig[0].main) : '#eee'}
color={!isColorFromPrimaryConfig ? (settings.primaryColor ?? defaultPrimaryColor) : '#eee'}
onChange={setDebouncedColor} onChange={setDebouncedColor}
/> />
<HexColorInput <HexColorInput
className={styles.colorInput} className={styles.colorInput}
color={!isColorFromPrimaryConfig ? (settings.primaryColor ?? primaryColorConfig[0].main) : '#eee'} // color={!isColorFromPrimaryConfig ? (settings.primaryColor ?? primaryColorConfig[0].main) : '#eee'}
color={!isColorFromPrimaryConfig ? (settings.primaryColor ?? defaultPrimaryColor) : '#eee'}
onChange={setDebouncedColor} onChange={setDebouncedColor}
prefixed prefixed
placeholder='Type a color' placeholder='Type a color'
src/@core/contexts/settingsContext.tsx
+4 -2
View File
@@ -9,7 +9,7 @@ import type { Mode, Skin, Layout, LayoutComponentWidth } from '@core/types'
// Config Imports // Config Imports
import themeConfig from '@configs/themeConfig' import themeConfig from '@configs/themeConfig'
import primaryColorConfig from '@configs/primaryColorConfig' import primaryColorConfig, { DEFAULT_PRIMARY_COLOR_PALETTE_ID } from '@configs/primaryColorConfig'
// Hook Imports // Hook Imports
import { useObjectCookie } from '@core/hooks/useObjectCookie' import { useObjectCookie } from '@core/hooks/useObjectCookie'
@@ -61,7 +61,9 @@ export const SettingsProvider = (props: Props) => {
navbarContentWidth: themeConfig.navbar.contentWidth, navbarContentWidth: themeConfig.navbar.contentWidth,
contentWidth: themeConfig.contentWidth, contentWidth: themeConfig.contentWidth,
footerContentWidth: themeConfig.footer.contentWidth, footerContentWidth: themeConfig.footer.contentWidth,
primaryColorPaletteId: primaryColorConfig[0].id primaryColor: primaryColorConfig.find(item => item.id === DEFAULT_PRIMARY_COLOR_PALETTE_ID)?.main ?? primaryColorConfig[0].main,
primaryColorPaletteId: DEFAULT_PRIMARY_COLOR_PALETTE_ID
} }
const updatedInitialSettings = { const updatedInitialSettings = {
src/components/layout/shared/ThemeColorDropdown.tsx
+13 -3
View File
@@ -16,6 +16,7 @@ import MenuItem from '@mui/material/MenuItem'
import Divider from '@mui/material/Divider' import Divider from '@mui/material/Divider'
import Typography from '@mui/material/Typography' import Typography from '@mui/material/Typography'
import Box from '@mui/material/Box' import Box from '@mui/material/Box'
import { DEFAULT_PRIMARY_COLOR_PALETTE_ID } from '@configs/primaryColorConfig'
// Config Imports // Config Imports
import primaryColorConfig from '@configs/primaryColorConfig' import primaryColorConfig from '@configs/primaryColorConfig'
@@ -52,8 +53,11 @@ const ThemeColorDropdown = () => {
}, [settings.mode]) }, [settings.mode])
// Get selected palette // Get selected palette
const selectedPaletteId = settings.primaryColorPaletteId || primaryColorConfig[0].id // const selectedPaletteId = settings.primaryColorPaletteId || primaryColorConfig[0].id
const selectedPalette = primaryColorConfig.find(p => p.id === selectedPaletteId) || primaryColorConfig[0] // const selectedPalette = primaryColorConfig.find(p => p.id === selectedPaletteId) || primaryColorConfig[0]
const defaultPalette = primaryColorConfig.find(p => p.id === DEFAULT_PRIMARY_COLOR_PALETTE_ID) || primaryColorConfig[0]
const selectedPaletteId = settings.primaryColorPaletteId || DEFAULT_PRIMARY_COLOR_PALETTE_ID
const selectedPalette = primaryColorConfig.find(p => p.id === selectedPaletteId) || defaultPalette
const handleClose = () => { const handleClose = () => {
setOpen(false) setOpen(false)
@@ -72,7 +76,13 @@ const ThemeColorDropdown = () => {
handleClose() handleClose()
if (settings.primaryColorPaletteId !== paletteId) { if (settings.primaryColorPaletteId !== paletteId) {
updateSettings({ primaryColorPaletteId: paletteId }) const palette = primaryColorConfig.find(item => item.id === paletteId)
updateSettings({
primaryColorPaletteId: paletteId,
...(palette?.main && { primaryColor: palette.main })
})
} }
} }
src/components/theme/index.tsx
+6 -2
View File
@@ -10,6 +10,7 @@ import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter'
import CssBaseline from '@mui/material/CssBaseline' import CssBaseline from '@mui/material/CssBaseline'
import type {} from '@mui/material/themeCssVarsAugmentation' //! Do not remove this import otherwise you will get type errors while making a production build import type {} from '@mui/material/themeCssVarsAugmentation' //! Do not remove this import otherwise you will get type errors while making a production build
import type {} from '@mui/lab/themeAugmentation' //! Do not remove this import otherwise you will get type errors while making a production build import type {} from '@mui/lab/themeAugmentation' //! Do not remove this import otherwise you will get type errors while making a production build
import { DEFAULT_PRIMARY_COLOR_PALETTE_ID } from '@configs/primaryColorConfig'
// Third-party Imports // Third-party Imports
import { useMedia } from 'react-use' import { useMedia } from 'react-use'
@@ -96,8 +97,11 @@ const CustomThemeProvider = (props: Props) => {
} }
// Get selected palette // Get selected palette
const selectedPaletteId = settings.primaryColorPaletteId || primaryColorConfig[0].id // const selectedPaletteId = settings.primaryColorPaletteId || primaryColorConfig[0].id
const selectedPalette = primaryColorConfig.find(p => p.id === selectedPaletteId) || primaryColorConfig[0] // const selectedPalette = primaryColorConfig.find(p => p.id === selectedPaletteId) || primaryColorConfig[0]
const defaultPalette = primaryColorConfig.find(p => p.id === DEFAULT_PRIMARY_COLOR_PALETTE_ID) || primaryColorConfig[0]
const selectedPaletteId = settings.primaryColorPaletteId || DEFAULT_PRIMARY_COLOR_PALETTE_ID
const selectedPalette = primaryColorConfig.find(p => p.id === selectedPaletteId) || defaultPalette
// Merge the primary color scheme override with the core theme // Merge the primary color scheme override with the core theme
const theme = useMemo(() => { const theme = useMemo(() => {
src/configs/primaryColorConfig.ts
+6 -5
View File
@@ -12,6 +12,7 @@ export type PrimaryColorConfig = {
light: ColorPalette light: ColorPalette
dark: ColorPalette dark: ColorPalette
} }
export const DEFAULT_PRIMARY_COLOR_PALETTE_ID = 'palette-6'
// Primary color config object // Primary color config object
const primaryColorConfig: PrimaryColorConfig[] = [ const primaryColorConfig: PrimaryColorConfig[] = [
@@ -100,16 +101,16 @@ const primaryColorConfig: PrimaryColorConfig[] = [
id: 'palette-6', id: 'palette-6',
paletteKey: 'green', paletteKey: 'green',
name: 'Green Palette', name: 'Green Palette',
main: '#97AE48', main: '#7f9c1c',
light: { light: {
main: '#97AE48', main: '#7f9c1c',
light: '#C1CF8B', light: '#C1CF8B',
dark: '#758543' dark: '#97AE48'
}, },
dark: { dark: {
main: '#97AE48', main: '#7f9c1c',
light: '#C1CF8B', light: '#C1CF8B',
dark: '#758543' dark: '#97AE48'
} }
}, },
] ]