Vuetify theme is being ignored - vue.js

Question

I have created a file in my plugins directory which looks like this:
import Vue from "vue";
import Vuetify from "vuetify/lib/framework";
Vue.use(Vuetify);
export default new Vuetify({
theme: {
themes: {
light: {
primary: "#081d4d", // $blue
secondary: "#00c8b7", // $jade
//anchor: "#081d4d", // $blue (by default vuetify styles anchors with the same colour of primary)
accent: "#82B1FF", // $blue
error: "#ff4438", // $warm-red
info: "#835dd0", // $violet
success: "#4CAF50", // none
warning: "#ff8204", // $orange
},
},
},
});
And then I use it in my main.ts like this:
import "./registerServiceWorker";
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import { provide } from "#vue/composition-api";
import { DefaultApolloClient } from "#vue/apollo-composable";
import "./plugins/axios";
import vuetify from "./plugins/vuetify";
import apolloClient from "./plugins/vue-apollo";
Vue.config.productionTip = false;
new Vue({
router,
store,
vuetify,
setup() {
provide(DefaultApolloClient, apolloClient);
},
render: (h) => h(App),
}).$mount("#app");
When I use a button or alert and set their colours, it's not using my theme.
Also, even if I try to change to the dark theme, nothing happens.
This is the template:
<template>
<div class="container-fluid d-flex align-items-center justify-content-center">
<div class="row">
<div class="col">
<div class="section section-white">
<h1>This is a test</h1>
<p>With some tests content</p>
<v-btn color="primary">Test</v-btn>
<v-alert type="info"></v-alert>
</div>
</div>
</div>
</div>
</template>
This is what my UI looks like:
As far as I can tell, I have followed the directions correctly, so I have no idea why this is not working.

Answer 1

Try to change this from
import Vuetify from "vuetify/lib/framework";
to
import Vuetify from "vuetify/lib";
Moreover, if you are not able to use theme attributes directly use it like this.
<v-btn :color="$vuetify.theme.themes["light"].primary">Test</v-btn>
or you can also use computed property for that
computedPrimaryColor(){
return this.$vuetify.theme.themes["light"].primary;
}
and use it like
<v-btn color="computedPrimaryColor">Test</v-btn>