How to define custom themes in vue.js using typescript?

Solution for How to define custom themes in vue.js using typescript?
is Given Below:

I am trying to change the colours of a Vue template (uses vuetify) that I am using but after pouring over the docs for a day I am not sure what else I can try.

My main file:

//src/main.ts

import '@babel/polyfill';
// Import Component hooks before component definitions
import './component-hooks';
import Vue from 'vue';
import './plugins/vuetify';
import './plugins/vee-validate';
import App from './App.vue';
import router from './router';
import store from '@/store';
import './registerServiceWorker';

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app');

the vuetify plugin file:

//src/plugins/vuetify.ts

import Vue from 'vue';
import Vuetify from 'vuetify';

Vue.use(Vuetify, {
  theme: {
      themes: {
          light: {
            primary: '#17242d', 
          },
          dark: {
            primary: '#17242d',
        },
      },
    },
});

I tried many variations of defining different themes in the vuetify.ts file but nothing changes the colours in of any component that references (for example) “primary”.

Other people seemed to have success with my approach: https://forum.vuejs.org/t/vuetify-how-to-add-a-custom-color-theme-after-create-the-project/40241/2

Am I missing something? Where should I look next?

EDIT 1: Removed reference to vuetify.min.css in main.ts. Now I can see my selected colour for a few ms before it switches back to default after server restart.

EDIT 2: Using the web inspector I could figure out that the primary colour is appended with !important (which as far as I understood means that this definition supersedes all others). How would I fid where that definition is?

Instead of importing Vuetify from node_modules within your main.ts you should rather import the file from your plugins folder.

So in your main.ts instead of

import Vuetify from 'vuetify';

try this

import './src/plugins/vuetify.ts';

//src/plugins/vuetify.ts
import Vue from "vue";
import Vuetify from "vuetify/lib/framework";
import "vuetify/dist/vuetify.min.css";

Vue.use(Vuetify);

export default new Vuetify({
  theme: {
    themes: {
      light: {
        primary: "#17242d",
      },
      dark: {
        primary: "#17242d",
      },
    },
  },
});

//src/main.ts
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import vuetify from "./plugins/vuetify";

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  vuetify,
  render: (h) => h(App),
}).$mount("#app");

Repo with demo