🔮Theme Colors

Change Default Color

For Change Default Primary Color - Go to resources/ts/layouts/components/CustomizerPanel.vue

const themeColors = ref<ThemeColor[]>([
  {
    bg: 'themeDefault',
    color: '#4680ff', // Update here for default primary color change
    darkColor: '#3F78FF', // for darkprimary color change
    lightcolor: '#E9F0FF', // for lightprimary color change
    lightcolorfordark: '#18243e', // for lightprimary color change for dark mode
    tooltipName: 'Preset 1',
  },
  ... other color presets
])

Without Using Customizer Preset Colors

If you don't want preset other colors options from customizer or you want to remove customizer options then follow below steps:

1. Go to default layout setup file. open resources/ts/layouts/default.vue

<VApp
      :style="getStyleObject()" // Remove This line
      :theme="customizer.actTheme"
      :class="[
        customizer.actTheme,
        customizer.fontTheme,
        customizer.miniSidebar ? 'mini-sidebar' : '',
        customizer.isHorizontalLayout ? 'horizontalLayout' : 'verticalLayout',
        customizer.inputBg ? 'inputWithbg' : '',
        customizer.themeContrast ? 'contrast' : '',
      ]"
    >
      ... other code 
 </VApp>

2. Delete Some code related to this

// Delete below whole code(it is for preset color change)
// Define the computed property to calculate the dynamic style object
const dynamicStyle = computed(() => ({
  '--v-theme-primary': HexToRgb(theme.current.value.colors.primary),
  '--v-theme-darkprimary': HexToRgb(theme.current.value.colors.darkprimary),
  '--v-theme-lightprimary': HexToRgb(theme.current.value.colors.lightprimary),
}))

// Method to conditionally apply the preset class
const getStyleObject = () => {
  // Define your condition here, for example:
  const condition = true // Replace this with your actual condition

  return condition ? dynamicStyle.value : {}
}

3. Delete some code from resources/ts/layouts/components/CustomizerPanel.vue

// Remove this whole code
// Watch for changes in the primary colors and update the theme accordingly
watch([customPrimaryColor, customDarkPrimaryColor, customLightPrimaryColor, customLightPrimaryColorForDark], ([newPrimaryColor, newDarkPrimaryColor, newLightPrimaryColor, newLightPrimaryColorForDark]) => {
  vuetifyTheme.themes.value.light.colors.primary = newPrimaryColor
  vuetifyTheme.themes.value.light.colors.darkprimary = newDarkPrimaryColor
  vuetifyTheme.themes.value.dark.colors.primary = newPrimaryColor
  vuetifyTheme.themes.value.dark.colors.darkprimary = newDarkPrimaryColor

  vuetifyTheme.themes.value.light.colors.lightprimary = newLightPrimaryColor
  vuetifyTheme.themes.value.dark.colors.lightprimary = newLightPrimaryColorForDark
})

4. Update default primary color to it's hexcolor code

// resources/ts/plugins/vuetify/index.ts
const light: ThemeDefinition = {
  dark: false,
  colors: {
    'primary': PrimaryColor, // Change PrimaryColor to '#dddddd'(Put your hexcolor)
    .. other variables
  },
}

const dark: ThemeDefinition = {
  dark: true,
  colors: {
    'primary': PrimaryColor,// Change PrimaryColor to '#dddddd'(Put your hexcolor)
    .. other variables
  },
}

5. finally restart your application using below command

npm run dev