Vuejs Vuetify color theme not working

vuetify css not working
override vuetify styles
vuetify custom css
vue color theme
vue theme
vuetify ie11
vuetify error color
vuetify header

I am using vuejs with vuetify, I put a Basic vuetify template and tried to Change the Color theme but the Color will not Switch. I do not get any Errors in my console and my Cache is cleared aswell.

The main.js Code:

import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
import colors from 'vuetify/es5/util/colors';

Vue.use(Vuetify, {
  theme: {
    primary: colors.indigo.base, // #E53935
    secondary: colors.indigo.base, // #FFCDD2
    accent: colors.indigo.base // #3F51B5
  }
});

const app = new Vue({
    el: '#app',
    // ...
});

And this is how my template Looks like.

    <div id="app">
  <v-app light>
    <v-navigation-drawer
      fixed
      v-model="drawerRight"
      right
      clipped
      app
    >
    </v-navigation-drawer>
    <v-toolbar
      dark
      fixed
      app
      clipped-right
    >
      <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
      <v-spacer></v-spacer>
      <v-toolbar-side-icon @click.stop="drawerRight = !drawerRight"></v-toolbar-side-icon>
    </v-toolbar>
    <v-content>
      <v-container fluid fill-height>
        <v-layout justify-center align-center>

        </v-layout>
      </v-container>
    </v-content>
  </v-app>
    </div>

the Color will not Switch

The colour of what? You don't have any components that use theme colours there. If you want to change the background colour of the toolbar for example you have to do <v-toolbar color="primary">

Vue + Vuetify theme not working · Issue #4256 · storybookjs , Calling Vue.use (Vuetify {theme: { primary: , etc.}}) is not working - a component that tries to use that theme does not take on the color,  Bug or support request summary Calling Vue.use (Vuetify {theme: { primary: , etc.}}) is not working - a component that tries to use that theme does not take on the color, for instance. Please provi


in my case i had to wrap all my components in v-app

<div id="id">
  <v-app>
// youre code here
  </v-app>
</div>

if you dont do this youre app use default theme.

reference from vuetify docs:

"In Vuetify, the v-app component and the app prop on components like v-navigation-drawer, v-app-bar, v-footer and more, help bootstrap your application with the proper sizing around component. This allows you to create truly unique interfaces without the hassle of managing your layout sizing. The v-app component is REQUIRED for all applications. This is the mount point for many of Vuetify's components and functionality and ensures that it propagates the default application variant (dark/light) to children components and also ensures proper cross-browser support for certain click events in browsers like Safari. v-app should only be used within your application ONCE."

[Solved]storybook Vue + Vuetify theme not working, Calling Vue.use (Vuetify {theme: { primary: , etc.}}) is not working - a component that tries to use that theme does not take on the color, for instance. Special thanks to yuanyan for the wonderful project. js is a Material component framework built upon Vue. To react to the search query changes, set a handler function on the @search-change event. Create a shape shifter Skeleton Card in Vuejs with Vuetify instead of a loader.


@DigitalDrifter suggested @import '~vuetify/src/stylus/main'.

However, that's stylus code. So you can create for example stylus folder and put main.styl in that folder, which is suggested so you can alter the default style easily.

Add that code to main.styl:

// main.styl
@import '~vuetify/src/stylus/main'

Then include main.styl in your app.js

// app.js
import './stylus/main.styl'

If you later want to override Vuetify default stylus variables inside (do it in main.styl), then your variables must be declared before the @import and then they will automatically override the Vuetify default variables.

Theme, Setup your application's theme and supplemental colors in a flash. src/plugins/​vuetify.js import Vue from 'vue' import Vuetify from 'vuetify/lib' Vue.use(Vuetify) export default new Vuetify({ theme: You can manually turn dark on and off by changing this. Custom properties are not natively supported in Internet Explorer. The v-btn component replaces the standard html button with a material design theme and a multitude of options. Any color helper class can be used to alter the background or text color. Any color helper class can be used to alter the background or text color.


Vuetify how to add a custom color theme after create , But now I want to change my color theme? How to I achieve I used vue cli to add vuetify to my project. vue add vuetify It just calls vuetify as a plugin not as a const. BoPedersen 6 Does this code still work? I seem to be  Vuetify theme not working. What makes Vuetify an interesting choice among the best Vue UI component libraries is the availability of ready-made scaffolding for code – in the form of pre-made vue-cli templates. Unfortunately, this is not the case when it comes to custom components.


Any ideas how to change default background colors in vuetify , We strive to bring MD spec components to vue.js developers so you can do However, the default light/dark theme isn't really the background colors I want problem is that I can't get it to work properly following the guide on Vuetify's pages.


How to change default style of vuetify - vuejs, However, the default light/dark theme isn't really the background colors I want, so I problem is that I can't get it to work properly following the guide on Vuetify's