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

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';
import 'vuetify/dist/vuetify.min.css';
import Vuetify from 'vuetify';

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?

from Recent Questions - Stack Overflow https://ift.tt/3ygr8jk
https://ift.tt/eA8V8J