Theme/Style configuration
Defines core of theme. How theme is being set using Vuetify 4.
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.
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'
}
},
.......
}
});
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
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
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.
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:
This will apply to all places where you used Typography class as text-display-medium
<h2 class="text-display-medium"...>
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:
This will apply to all places where you used h5 tag
<h5 ...>
Last updated