Dark Theme With Vuetify
Tags: vue, javascript
Published: 2021-04-25 19:24:13

# 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: 

```javascript
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](https://vuetifyjs.com/en/styles/colors/#material-colors). You can learn more about Vuetify themes [here](https://vuetifyjs.com/en/features/theme/#light-and-dark).

# 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:
```html
<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:
```html
 <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:
```javascript
 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:
```html
<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.