Color theme change in Vuetify not working

Question

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>

Answer 1

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

Answer 2

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."

Answer 3

@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.