Colors & Themes

Customize your application's default text colors, surfaces, and more. Easily modify your theme programmatically in real time. Vuetify comes with standard support for light and dark variants. For more detailed explnation read this documentation

Updating colors

Here, we will go over how you can customize the theme/colors in our template.
Theme's colors and modes are defined in src/plugins/vuetify/theme.js.

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.

File: /src/plugins/vuetify/theme.js

const theme = {
  ...
  ...
  themes: {
    light: {
      colors: {
        dark: '#1e293b',
        light: '#f1f5f9',
        white: '#ffffff',
        primary: '#624bff',
        ...
        ...
      },
    },

    dark: {
      colors: {
        dark: '#f1f5f9',
        light: '#1e293b',
        white: '#ffffff',
        primary: '#624bff',
        ...
        ...
      }
    }
  }
}

TIP
If you want to override any style or want to add your custom scss code, you can use _user.scss file located at below path.
File : /src/@core/styles/_user.scss

Set as default dark theme mode

Vuetify comes with two themes pre-installed, light and dark. To set the default theme of your application, use the defaultTheme option.

Mostly you will use default light theme mode, you can set dark or light as for your prefrence.

File: /plugins/vuetify/theme.js

const theme = {
  defaultTheme: 'dark'
  // other settings
}

// After change clear your local storage and reload page.

Note
Make sure you clear the browser's local storage in order to see the config changes in the template. Refer: How to clear site storage?.

Colors & Themes
Updating Colors
Default Dark Theme

Colors & Themes

Updating colors

Set as default dark theme mode

CONTENTS