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.

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

• ThemeSwitcher component