Appearance
Colors & Themes
You can customize colors via theme in Vuetify. You can customize them as mentioned in theird docs.
Here, we will go over how you can customize the theme/colors in our template. Themes are defined in src/plugins/vuetify/theme.ts
.
Updating colors
To update primary colors to something else navigate to above mentioned vuetify plugin theme file and update primary to desired colors in themes you like.
ts
theme: {
defaultTheme: localStorage.getItem(`${themeConfig.app.title}-theme`) || themeConfig.app.theme.value,
themes: {
light: {
dark: false,
colors: {
'primary': '#a169ff',
'primary': '#000',
// other...
},
dark: {
dark: true,
colors: {
'primary': '#a169ff',
'primary': '#000',
// other...
},
},
},
},
}
In above code snippet we just updated the primary color in light & dark theme. Now when you run the project #000
color will be your primary color.
Themes
With vuetify you are not limited to just light & dark. You can add as many themes as you like. In the same vuetify plugin file you can add or remove the themes.
For detailed docs on how to use themes please visit vuetify's official docs.
Related pages