# Theme/Style configuration

Customize Mantis with your theme. You can change the colors, the default components configuration and much more. Vuetify provides flexibility to change the style of the project in a single place, and on top of it, we made it more centralized and consistent with the proper file structure.

### Theme configuration

The whole theme can be configured from the folder. **`src/plugins/vuetify.ts`** Theme initialization starts `vuetify.ts` where the palette and components' overridable style exist.

{% code title="vuetify.ts" %}

```typescript
import { type ThemeDefinition, createVuetify } from 'vuetify';
import { aliases, mdi } from 'vuetify/iconsets/mdi-svg';
import { createVueI18nAdapter } from 'vuetify/locale/adapters/vue-i18n';
import { createI18n, useI18n } from 'vue-i18n';
import { messages } from '@/utils/locales/messages';
import { icons } from './mdi-icon'; // Import icons from separate file
import * as components from 'vuetify/components';
import * as directives from 'vuetify/directives';
.....

export const PrimaryColor = '#1677ff';
export const PrimaryDarkColor = '#0958d9';
export const PrimaryLightColor = '#69b1ff';
export const PrimaryLightColorForDark = '#15417e';

export const i18n = createI18n({
  legacy: false,
  locale: 'en',
  fallbackLocale: 'en',
  messages
});

const light: ThemeDefinition = {
  dark: false,
  variables: {
    .....
  },
  colors: {
    primary: PrimaryColor,
    secondary: '#8c8c8c',
    info: '#13c2c2',
    success: '#52c41a',
    accent: '#FFAB91',
    warning: '#faad14',
    error: '#ff4d4f',

    ......
  }
};

const dark: ThemeDefinition = {
  dark: true,
  variables: {
    .....
  },
  colors: {
    primary: PrimaryColor,
    secondary: '#d9d9d9',
    info: '#13a8a8',
    success: '#49aa19',
    accent: '#fc4b6c',
    warning: '#d89614',
    error: '#a61d24',

    ........
  }
};

export default createVuetify({
  display: {
    thresholds: {
      xs: 0,
      sm: 768,
      md: 1024,
      lg: 1266,
      xl: 1440
    }
  },
  locale: {
    adapter: createVueI18nAdapter({ i18n, useI18n })
  },
  components: {
    ...components,
  },
  directives,
  icons: {
    defaultSet: 'mdi',
    aliases: {
      ...aliases,
      ...icons
    },
    sets: {
      mdi
    }
  },
  theme: {
    defaultTheme: 'light',
    themes: {
      light,
      dark
    }
  },
  defaults: {
    VBtn: {
      variant: 'flat'
    },
    VBtnGroup: {
      VBtn: {
        color: 'darkText'
      }
    },
    
    .......
  }
});

```

{% endcode %}

### How to customize it?

You might come across questions like how to change a theme's **secondary** color. How do I change the textbox or other components that can apply to an entire theme?

#### Customize Theme Colors

To change the color of the theme, you can apply color directly to  **`src/plugins/vuetify.ts`** 

For instance, if you want to change the color that `theme.current.value.colors.secondary` is being used in a theme, then update the following in **`src/plugins/vuetify.ts`** 

<pre class="language-typescript" data-title="vuetify.ts"><code class="lang-typescript">.....

const light: ThemeDefinition = {
  dark: false,
  variables: {
    .....
  },
  colors: {
    primary: PrimaryColor,
<strong>    secondary: '#8c8c8c',   // update here
</strong>    info: '#13c2c2',
    success: '#52c41a',
    accent: '#FFAB91',
    warning: '#faad14',
    error: '#ff4d4f',

    ......
  }
};
</code></pre>

### Customize Vuetify Component style

We have provided a central location to override any default style & props of any component. All the override styles exist in **`src/plugins/vuetify.ts`**

{% code title="vuetify.ts" %}

```typescript
export default createVuetify({
  ....
  defaults: {
    VBtn: {
      variant: 'flat'
    },
    VBtnGroup: {
      VBtn: {
        color: 'darkText'
      }
    },
    VCard: {
      rounded: 'md'
    },
   .........
  }
});
```

{% endcode %}

You can add a default property for any Vuetify component and it will be applied everywhere. We emitted lines to view it better in the above code block but you can see many controls' styles overridden in the **settings.scss** file. Feel free to change it as per your need.<br>

{% code title="src/scss/settings.scss" %}

```scss
.....

$custom-card-subtitle-line-height: 1.66;
$custom-card-subtitle-opacity: 0.528;
$custom-card-subtitle-padding: 0;
$custom-card-subtitle-font-size: 0.75rem;
$custom-card-text-padding: 20px;
$custom-card-actions-padding: 14px 20px 14px; 

......

@forward "vuetify/settings" with (
   ......
  // cards
  $card-subtitle-line-height: $custom-card-subtitle-line-height,
  $card-subtitle-opacity: $custom-card-subtitle-opacity,
  $card-subtitle-padding: $custom-card-subtitle-padding,
  $card-subtitle-font-size: $custom-card-subtitle-font-size,
  $card-text-padding: $custom-card-text-padding,
  $card-item-padding: $custom-card-text-padding,
  $card-actions-padding: $custom-card-actions-padding,
  .......
);
```

{% endcode %}

### Customize Theme Typography

You can customize the typography used in the theme as well from `_variables.scss`.

For instance, If you want to change `font-weight` the typography `display-medium` to `500`. To do that, open **`src\scss\_variables.scss`** and update as below:<br>

<pre class="language-scss"><code class="lang-scss">@use "sass:math";
@use "sass:map";
@use "sass:meta";
@use "vuetify/lib/styles/tools/functions" as *;

.....

// Vuetify overrides
@use "vuetify/styles" with (
   ......
  // Global Typography
  $font-size-root: 1rem,
  $typography: (
     ......
    "display-medium": ("size": 1.875rem,
<strong>      "weight": 600,       // change here
</strong>      "letter-spacing": normal,
      "line-height": 1.27,
      "font-family": inherit,
    ),
    .....
   ));
</code></pre>

This will apply to all places where you used Typography class as **`text-display-medium`**

**`<h2 class="text-display-medium"...>`**&#x20;

### **How to change default h1 to h6 tag typography**

Update **@css layers** style for this typography changes

For instance, If you want to change `font-weight` the typography `h5` to `500`. To do that, open **`src/scss/_override.scss`** and update as below:

<pre class="language-scss"><code class="lang-scss">......
@layer vuetify-core {
  .....
  h5 {
    font-size: 1rem;
<strong>    font-weight: 600; // change here 500 value
</strong>    line-height: 1.5;
    letter-spacing: normal;
    margin-top: 0;
    margin-bottom: 0;
  }
  ......
}

</code></pre>

This will apply to all places where you used **`h5`**  tag

**`<h5 ...>`**


---

# Agent Instructions: 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://codedthemes.gitbook.io/mantis-vuetify/theme-style-configuration.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.