Colors & Themes Customization in Vuetify

You can customize colors via theme in Vuetify. You can customize them as mentioned in their 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 in Vuetify to something else navigate to above mentioned vuetify plugin theme file and update primary to desired colors in themes you like.

theme: {
  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.

Related pages

• ThemeSwitcher component