CODEWITHSUNDEEP
javascripttypescriptvue.jsvuetify.js
MaxJ
MaxJ

Reputation: 167

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';

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?

Upvotes: 1

Views: 1430

Answers (2)

Aer0
Aer0

Reputation: 3907

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';

Upvotes: 2

Chris Wong
Chris Wong

Reputation: 592

//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

Upvotes: 1

Related Questions