UPDATE

src/@core/components/customizer/index.tsx

@@ -40,7 +40,7 @@ import DirectionLtr from '@core/svg/DirectionLtr'
 import DirectionRtl from '@core/svg/DirectionRtl'
 
 // Config Imports
-import primaryColorConfig from '@configs/primaryColorConfig'
+import primaryColorConfig, { DEFAULT_PRIMARY_COLOR_PALETTE_ID } from '@configs/primaryColorConfig'
 
 // Hook Imports
 import { useSettings } from '@core/hooks/useSettings'
@@ -62,6 +62,8 @@ const getLocalePath = (pathName: string, locale: string) => {
 
   return segments.join('/')
 }
+const defaultPrimaryColor =
+      primaryColorConfig.find(item => item.id === DEFAULT_PRIMARY_COLOR_PALETTE_ID)?.main ?? primaryColorConfig[0].main
 
 type DebouncedColorPickerProps = {
   settings: Settings
@@ -74,7 +76,7 @@ const DebouncedColorPicker = (props: DebouncedColorPickerProps) => {
   const { settings, isColorFromPrimaryConfig, handleChange } = props
 
   // States
-  const [debouncedColor, setDebouncedColor] = useState(settings.primaryColor ?? primaryColorConfig[0].main)
+  const [debouncedColor, setDebouncedColor] = useState(settings.primaryColor ?? defaultPrimaryColor)
 
   // Hooks
   useDebounce(() => handleChange('primaryColor', debouncedColor), 200, [debouncedColor])
@@ -82,12 +84,16 @@ const DebouncedColorPicker = (props: DebouncedColorPickerProps) => {
   return (
     <>
       <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}
       />
       <HexColorInput
         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}
         prefixed
         placeholder='Type a color'

src/@core/contexts/settingsContext.tsx

@@ -9,7 +9,7 @@ import type { Mode, Skin, Layout, LayoutComponentWidth } from '@core/types'
 
 // Config Imports
 import themeConfig from '@configs/themeConfig'
-import primaryColorConfig from '@configs/primaryColorConfig'
+import primaryColorConfig, { DEFAULT_PRIMARY_COLOR_PALETTE_ID } from '@configs/primaryColorConfig'
 
 // Hook Imports
 import { useObjectCookie } from '@core/hooks/useObjectCookie'
@@ -61,7 +61,9 @@ export const SettingsProvider = (props: Props) => {
     navbarContentWidth: themeConfig.navbar.contentWidth,
     contentWidth: themeConfig.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 = {

src/components/layout/shared/ThemeColorDropdown.tsx

@@ -16,6 +16,7 @@ import MenuItem from '@mui/material/MenuItem'
 import Divider from '@mui/material/Divider'
 import Typography from '@mui/material/Typography'
 import Box from '@mui/material/Box'
+import { DEFAULT_PRIMARY_COLOR_PALETTE_ID } from '@configs/primaryColorConfig'
 
 // Config Imports
 import primaryColorConfig from '@configs/primaryColorConfig'
@@ -52,8 +53,11 @@ const ThemeColorDropdown = () => {
   }, [settings.mode])
 
   // Get selected palette
-  const selectedPaletteId = settings.primaryColorPaletteId || primaryColorConfig[0].id
-  const selectedPalette = primaryColorConfig.find(p => p.id === selectedPaletteId) || primaryColorConfig[0]
+  // const selectedPaletteId = settings.primaryColorPaletteId || primaryColorConfig[0].id
+  // 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 = () => {
     setOpen(false)
@@ -72,7 +76,13 @@ const ThemeColorDropdown = () => {
     handleClose()
 
     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

@@ -10,6 +10,7 @@ import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter'
 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/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
 import { useMedia } from 'react-use'
@@ -96,8 +97,11 @@ const CustomThemeProvider = (props: Props) => {
   }
 
   // Get selected palette
-  const selectedPaletteId = settings.primaryColorPaletteId || primaryColorConfig[0].id
-  const selectedPalette = primaryColorConfig.find(p => p.id === selectedPaletteId) || primaryColorConfig[0]
+  // const selectedPaletteId = settings.primaryColorPaletteId || primaryColorConfig[0].id
+  // 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
   const theme = useMemo(() => {

src/configs/primaryColorConfig.ts

@@ -12,6 +12,7 @@ export type PrimaryColorConfig = {
   light: ColorPalette
   dark: ColorPalette
 }
+export const DEFAULT_PRIMARY_COLOR_PALETTE_ID = 'palette-6'
 
 // Primary color config object
 const primaryColorConfig: PrimaryColorConfig[] = [
@@ -100,16 +101,16 @@ const primaryColorConfig: PrimaryColorConfig[] = [
     id: 'palette-6',
     paletteKey: 'green',
     name: 'Green Palette',
-    main: '#97AE48',
+    main: '#7f9c1c',
     light: {
-      main: '#97AE48',
+      main: '#7f9c1c',
       light: '#C1CF8B',
-      dark: '#758543'
+      dark: '#97AE48'
     },
     dark: {
-      main: '#97AE48',
+      main: '#7f9c1c',
       light: '#C1CF8B',
-      dark: '#758543'
+      dark: '#97AE48'
     }
   },
 ]