Intro

I recently started tinkering with Vue.js in my free time. I've really enjoyed learning Vue.js and thought I would share some of the things that I learn starting with this post.

I hope you enjoy this post. Also, as stated, I'm new to Vue, so if you're a seasoned Vue dev and see something that I could've done differently or better, please feel free to share.

Let's get started.

Create A Theme

In the vuetify.js file located at src/plugins/vuetify.js I added my theme like so:

import '@mdi/font/css/materialdesignicons.css';
import Vue from 'vue';
import Vuetify from 'vuetify/lib/framework';
import colors from 'vuetify/lib/util/colors';

Vue.use(Vuetify);

export default new Vuetify({
  icons: {
    iconfont: 'mdi',
  },
  theme: {
    themes: {
      light: {
        primary: colors.lightBlue,
        secondary: colors.grey.darken1,
        accent: colors.pink.darken1,
        error: colors.red.accent3,
        background: colors.indigo.lighten5,
        info: colors.teal.darken1,
      },
      dark: {
        primary: colors.blue.darken4,
        background: colors.indigo.base,
        info: colors.teal.lighten1,
      },
    },
  },
});

As you can see, I have defined both a light and dark theme. I am also making use of the predefined Material colors. You can learn more about those here. You can learn more about Vuetify themes here.

Using Theme Colors

Using the colors that are defined in the theme is pretty straightforward. The theme color just has to be bound to the color property of a Vuetify component. For example, if I wanted my v-app-bar to use the primary color that I defined in my theme it would look something like this:

<v-app-bar color="primary" elevate-on-scroll>

The cool thing here is that since I have a primary color defined in both my light and dark themes, when I switch my app to use the dark theme, my v-app-bar will automagically change to use the primary color defined in the dark theme.

Programmatically Switching Themes

I wanted to have a button somewhere that my users can click to toggle the theme from light to dark. I added a couple of buttons to my v-app-bar that allow just that. I'm sure there are many ways to do this, but my implementation looks something like this:

 <v-btn icon v-if="!$vuetify.theme.dark" @click="toggleTheme()">
        <v-icon class="mr-1" color="blue-grey darken-4">mdi-lightbulb</v-icon>
      </v-btn>
      <v-btn icon v-if="$vuetify.theme.dark" @click="toggleTheme()">
        <v-icon color="yellow darken-3">mdi-lightbulb-outline</v-icon>
      </v-btn>

As you can see, I have two buttons defined, one will show if the theme is not dark, the other will show if the theme is dark. I have a click event on each button that will fire off the toggleTheme method. That method looks like this:

 toggleTheme() {
      this.$vuetify.theme.dark = !this.$vuetify.theme.dark;
    }

Dynamic Class Based on Theme

You may run across some other styles that you may want to change depending on the currently selected theme. In that case you could do something like this:

<v-list-item
          :class="{
            'title-item': !$vuetify.theme.dark,
            'title-item-dark': $vuetify.theme.dark,
          }"
          class="nav-item d-flex d-small-flex d-md-none"
        >

I am using v-bind to dynamically choosing which class to use based on whether dark theme is selected or not.

Conclusion

I found it fairly simple to implement a dark theme in my app using Vuetify. Please feel free to share your thoughts, comments, etc in the comments section. Thank you.