vuetify.js doesn't working in Vue 3 (theme customzing)

Question

What I want to do is customize theme colors (primary, secondary..) to use on the elements like v-buttons, v-chips, etc.

I found that i can modify it in '/src/plugins/vuetify.js' file as below:

import 'vuetify/styles'
import { createVuetify } from 'vuetify'

export default createVuetify({

  theme: {
      theme: { light : true},
      options: {
          customProperties: true,
      },
      themes: {
          light: {
              background: '#FFFFFF',
              primary: '#ff0000',
              secondary: '#b0bec5',
              accent: '#25316A',
              error: '#E86674',
              orange: '#FF7A0D',
              golden: '#A68C59',
              badge: '#F5528C',
              customPrimary: '#ff0000',
          },
          dark: {
              primary: '#085294',
          },
      },
   },
})

I tried it but it doesn't work. It's weired that there's no change even if i removed vuetify.js file!!

My vue and vuetify are version 3. Is there another way to customize theme in Vuetify 3?

Thank you for reading.

Answer 1

import 'vuetify/styles'
import { createVuetify } from 'vuetify'

export default createVuetify({
    theme: {
      defaultTheme: "light",
      themes: {
        light: {
          dark: false,
          colors: {
            background: "#FFFFFF",
            primary: "#ffff00",
            secondary: "#b0bec5",
            accent: "#25316A",
            error: "#E86674",
            orange: "#FF7A0D",
            golden: "#A68C59",
            badge: "#F5528C",
            customPrimary: "#ff0000",
          },
        },
        dark: {
          dark: true,
          colors: {
            primary: "#085294",
          },
        },
      },
    },
  })