> For the complete documentation index, see [llms.txt](https://phoenixcoded.gitbook.io/able-pro/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://phoenixcoded.gitbook.io/able-pro/vue-laravel/theme-ui/theme-colors.md).

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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://phoenixcoded.gitbook.io/able-pro/vue-laravel/theme-ui/theme-colors.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.