# Theme Colors

## Change Default Color

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

<pre class="language-typescript"><code class="lang-typescript">export const themeColors: ThemeColor[] = [
  {
    bg: 'themeDefault',
<strong>    color: '#4680ff', // Update here for default primary color change
</strong>    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
])
</code></pre>

## 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`

<pre class="language-typescript"><code class="lang-typescript">&#x3C;VApp
<strong>      :style="getStyleObject()" // Remove This line
</strong>      :theme="reslovedTheme"
      :class="[
        customizer.fontTheme,
        customizer.mini_sidebar ? 'mini-sidebar' : '',
        customizer.setHorizontalLayout ? 'horizontalLayout' : 'verticalLayout',
        customizer.inputBg ? 'inputWithbg' : '',
        customizer.themeContrast ? 'contrast' : '',
      ]"
    >
      ... other code 
 &#x3C;/VApp>
</code></pre>

2. Delete Some code related to this

```typescript

// 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 : {};
};
```

3. Delete some code from `resources/ts/App.vue`

```typescript
// 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 }
);
```

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

<pre class="language-typescript"><code class="lang-typescript">// resources/ts/plugins/vuetify/index.ts
const light: ThemeDefinition = {
  dark: false,
  colors: {
<strong>    'primary': PrimaryColor, // Change PrimaryColor to '#dddddd'(Put your hexcolor)
</strong>    .. other variables
  },
}

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

5. finally restart your application using below command

```bash
npm run dev
```