vuetify change theme to a custom one

3
votes

I've been using Vuetify for a few weeks now. Having read the docs and some posts in that regard I tried to alter the 'dark' theme to suite my needs.

From some reason, I can only alter colours to components by specifically setting their colours of via CSS of course.

my vuetify.js file (under plugins) looks like that:

import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import colors from 'vuetify/lib/util/colors';

Vue.use(Vuetify);

export default new Vuetify({
  theme: {
    themes: {
      light: {
        primary: colors.purple,
        secondary: colors.grey.darken1,
        accent: colors.shades.black,
        error: colors.red.accent3,
      },
      dark: {
        primary: colors.blueGrey.darken2,
        secondary: colors.blueGrey.lighten2,
        accent: colors.blueGrey.darken3,
      },
    },
  },
});

My App.vue file looks like that:

  <div>
    <v-app dark>
      <v-tabs background-color="#2c394f" color="white">
        <v-tab to="/deploy">Deploy</v-tab>
        <v-tab to="/dashboard">Dashboard</v-tab>
      </v-tabs>
      <keep-alive>
        <router-view/>
      </keep-alive>
    </v-app>
  </div>
</template>

<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

<style scoped>

</style>

As you may notice, I'm using dark theme (in v-app component) and since my theme definitions are not being applied, I've manually set the (for instance) v-tabs component. Ideally, I'd like to just set the colour of v-tabs using color="primary" or something like that, but if I remove the properties, I'm getting the default theme, which is 'light' in that case.

Any help will be appreciated.

2
vue.jsvuetify.js

2 Answers

5
votes

You just need to set theme.dark:true to enable dark for the entire app. Then the custom dark colors will be applied..

export default new Vuetify({
  theme: {
    dark: true,
    themes: {
      light: {
        primary: colors.purple,
        secondary: colors.grey.darken1,
        accent: colors.shades.black, 
        error: colors.red.accent3,
      },
      dark: {
        primary: colors.blueGrey.darken2,
        secondary: colors.blueGrey.lighten2,
        accent: colors.blueGrey.darken3,
      },
    },
  },
})

Demo

0
votes

To extend Zim answer, there's also the ability to set it programatically if you want to provide that option to the user using this.$vuetify.theme.dark //bolean.

This example may be seen in the documentation https://vuetifyjs.com/en/features/theme/#theme-provider

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    items: ['One', 'Two', 'Three']
  }),
})
<!DOCTYPE html>
<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>

<body>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
  <div id="app">
    <v-app>
      <v-main>
        <v-container>
          <v-card flat>
            <v-toolbar flat height="72">
              <v-switch v-model="$vuetify.theme.dark" hint="This toggles the global state of the Vuetify theme" inset label="Vuetify Theme Dark" persistent-hint></v-switch>
            </v-toolbar>

            <v-card-text>
              <v-list dark>
                <v-subheader>I inherit dark from my parent</v-subheader>

                <v-list-item v-for="item in items" :key="item">
                  <v-list-item-title v-text="item"></v-list-item-title>
                </v-list-item>
              </v-list>

              <v-divider class="mb-y"></v-divider>
              <v-theme-provider root>
        <v-list>
          <v-subheader>
            <span>I inherit from the root</span>

            <strong>&nbsp;$vuetify.theme.dark</strong>
          </v-subheader>

          <v-list-item
            v-for="item in items"
            :key="item"
          >
            <v-list-item-title v-text="item"></v-list-item-title>
          </v-list-item>
        </v-list>
      </v-theme-provider>
            </v-card-text>
          </v-card>
        </v-container>
      </v-main>
      <v-footer>Footer without app</v-footer>
    </v-app>
  </div>