Vuejs + Vuetify Custom Theme and Icons Not working

Question

I have searched through all the previous questions, and with the new version of Vuetify, the custom themes and icons are not working for me.

"vuetify": "^2.1.11",

vuetify.js file:

import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import 'vuetify/dist/vuetify.min.css';
import '@fortawesome/fontawesome-free/css/all.css'

import SmithIcon from '../icons/SmithIcon.vue'

Vue.use(Vuetify);

const opts = {
    iconfont: 'fa',
    theme: {
        primary: '#000000',
        secondary: '#FFD65E',
        accent: '#EDAFB8',
        error: '#FF5252',
        info: '#2196F3',
        success: '#4CAF50',
        warning: '#FFC107'
    },
    icons: {
        smith: {
            component: SmithIcon
        }
    }
}

export default new Vuetify(opts);

main.js file:

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router';

// services
import router from './router'
import vuetify from './plugins/vuetify';

import store from './store/index';

Vue.config.productionTip = false

Vue.use(VueRouter);


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

Navbar.vue file: (use)

<v-app-bar
                app
                clipped-right
                color="primary"
                dark
        >
            <v-app-bar-nav-icon @click.stop="drawer = !drawer"/>
            <v-toolbar-title>
                <v-row>
                    <v-col>
                        <v-img src="../../assets/arc-logo.svg" max-width="150"/>
                    </v-col>
                </v-row>
            </v-toolbar-title>
            <v-spacer/>
                <div class="mr-5">
                    <v-img src="../../assets/help.svg" max-width="35"/>
                </div>
        </v-app-bar>

The color of the navbar should be black due to my custom themes, but it is still the vuetify default blue. Please advise.

Did you try to put :class="primary" in your v-app-bar instead of color="primary"? — Vermicello

Zim Zim · Accepted Answer · 2019-12-04T15:58:36

The default theme in 2.x is 'light', so you need to set the colors inside that...

theme: {
    themes: {
        light: {
            primary: '#000',
            secondary: '#FFD65E',
            accent: '#EDAFB8',
            error: '#FF5252',
            info: '#2196F3',
            success: '#4CAF50',
            warning: '#FFC107'
        }
    }
}

And the custom icons are set like...

   icons: {
        iconfont: 'fa',
        values: {
            clear: 'fas fa-trash',
            menu: 'fa fa-bars'
        }
   }

Demo

Vuejs + Vuetify Custom Theme and Icons Not working

1 Answers