I've been trying to update the color scheme of a Vue template (using vuetify) that I'm working with, but after spending hours on the documentation, I'm at a loss for what to do next.
Here is 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've tried various ways of defining different themes in the vuetify.ts file, but nothing seems to change the colors of any components that reference "primary", for example.
Other users appear to have had success with a similar approach: https://forum.vuejs.org/t/vuetify-how-to-add-a-custom-color-theme-after-create-the-project/40241/2
Am I overlooking something? Where should I focus my attention next?
EDIT 1: I removed the reference to vuetify.min.css in main.ts. Now I can briefly see my chosen color before it reverts back to the default after restarting the server.
EDIT 2: By using the web inspector, I discovered that the primary color is being overridden with !important (indicating that this definition takes precedence over all others). How can I locate where that definition is coming from?