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>

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

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

Comments

[Bcktr]

Thanks man thats worked, But it still modified v-app container because of size and default background

[yehonatan yehezkel]

for sizing problem of the page wrap with <v-main> the main content area just after v-app "The key component to making your page content work together with layout elements is v-main"