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.

looks OK - but the fact that you can remove vuetify.js file without errors suggests you're doing something else wrong ... since the vuetify.js file is usually imported in `main.js` ... another issue of course is that *the Vuetify 3 documentation, examples and information may be broken or outdated* - and it really is - for example, vuetify3 reportedly works on ios 12 ... it doesn't - and after I reported that fact, they changed it to ios15, and ios13 needs polyfill, and apparently ios12 is not supported at all - the point being, vuetify3 is FAR from stable and FAR from production ready — Jaromanda X, Sep 01 '22 at 02:27
I've not found the reason yet, Thanks for your advice though. It was really helpful! — Harnsle Lee, Sep 01 '22 at 06:33

score 1 · Answer 1 · answered Sep 18 '22 at 05:39

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",
          },
        },
      },
    },
  })

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

1 Answers1