🔮Theme Colors

Change Default Color

For Change Default Primary Color - Go to resources/ts/utils/themeColors.vue

export const themeColors: 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="reslovedTheme"
      :class="[
        customizer.fontTheme,
        customizer.mini_sidebar ? 'mini-sidebar' : '',
        customizer.setHorizontalLayout ? 'horizontalLayout' : 'verticalLayout',
        customizer.inputBg ? 'inputWithbg' : '',
        customizer.themeContrast ? 'contrast' : '',
      ]"
    >
      ... other code 
 </VApp>

1. 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(() => {
  const colors = theme.current.value?.colors;

  return {
    '--v-theme-primary': colors?.primary ? HexToRgb(colors.primary) : '',
    '--v-theme-darkprimary': colors?.darkprimary ? HexToRgb(colors.darkprimary) : '',
    '--v-theme-lightprimary': colors?.lightprimary ? HexToRgb(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 : {};
};

1. Delete some code from resources/ts/App.vue

// Remove this whole code
// Get the Vuetify theme instance
const vuetifyTheme = useTheme();

const activePreset = computed(() => {
  return themeColors.find((t) => t.tooltipName === customizer.presetColor) ?? themeColors[0];
});

watch(
  activePreset,
  (preset) => {
    const light = vuetifyTheme.themes.value.light;
    const dark = vuetifyTheme.themes.value.dark;

    if (!preset) return;

    if (light?.colors) {
      light.colors.primary = preset.color;
      light.colors.darkprimary = preset.darkColor;
      light.colors.lightprimary = preset.lightcolor;
    }

    if (dark?.colors) {
      dark.colors.primary = preset.color;
      dark.colors.darkprimary = preset.darkColor;
      dark.colors.lightprimary = preset.lightcolorfordark;
    }
  },
  { immediate: true }
);

1. Update default primary color to it's hexcolor code (Also update others variables like this using hexcolor)

// 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
  },
}

1. finally restart your application using below command

npm run dev