Revision history [back]

The theme settings in Vuetify3 can be established by following the steps below:

Step 1: Install Vuetify3

First, you need to install Vuetify3 using either NPM or Yarn.

Step 2: Import the Vuetify library

After installing Vuetify3, you need to import the Vuetify library into your Vue.js application. You can do this by importing and registering the Vuetify plugin in your main.js file.

Step 3: Import the Vuetify theme

Next, you need to import the Vuetify theme into your application. You can either create a new theme or use one of the pre-defined themes provided by Vuetify.

Example:

import { createTheme, VApp, ... } from 'vuetify'

const theme = createTheme({ colors: { primary: '#1976d2', // blue secondary: '#424242', // grey accent: '#82B1FF', // light blue }, typography: { fontFamily: 'Roboto', // default font family }, })

Vue.createApp({ components: { VApp }, vuetify: createVuetify({ theme, }), }).mount('#app')

Step 4: Apply the theme

Finally, you can apply the theme to your components or application by specifying the theme property in the Vuetify object.

Example:

<v-app theme="dark"> ... </v-app>

In the above example, the theme property is set to "dark" which will apply a dark theme to the Vuetify component. You can also set the theme to "light" to apply a light theme.

Overall, the process of establishing the theme settings in Vuetify3 involves importing the Vuetify library and theme, and then applying the theme to your components or application by specifying the theme property in the Vuetify object.