Vuetify Theme Not Working with Custom Theme

Question

I am trying to adjust the theme colors for Vuetify and my changes are not registering. I have seen several other posts and have replicated there code but have been unable to make it work. The color remains the default Vuetify primary color. The secondary color will not change either.

Things I have tried:

Wrap app in
Various configurations of Vue.use

vuetify.js

import Vue from "vue";
import Vuetify from "vuetify/lib";

Vue.use(Vuetify, {
  theme: {
    primary: "red",
    secondary: "#29B6F6",
    anyColor: "#0000",
  },
});

export default new Vuetify({});

Stepper.vue

<template>
  <div>
    <v-stepper alt-labels id="stepper">
      <v-stepper-header class="stepper-header">
        <v-stepper-step step="1" color="secondary">
          Accept Terms of Service
        </v-stepper-step>

        <v-divider></v-divider>

        <v-stepper-step step="2">
          View Membership Options
        </v-stepper-step>

        <v-divider></v-divider>

        <v-stepper-step step="3">
          Payment (optional)
        </v-stepper-step>

        <v-divider></v-divider>

        <v-stepper-step step="4">
          Confirmation
        </v-stepper-step>
      </v-stepper-header>
    </v-stepper>
  </div>
</template>

<script>
import "../assets/css/main.css";
export default {
  name: "Stepper",
  data() {
    return {
      e1: 1,
    };
  },
};
</script>

<style scoped>
#stepper {
  margin: auto;
  margin-top: 8vh;
  width: 62.5%;
  height: 80vh;
  border-radius: 20px;
}
.stepper-header {
  box-shadow: none !important;
  padding: 0 10% 0 10%;
  font-family: Roboto;
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  line-height: 17px;
  letter-spacing: 1px;
  text-align: center;
  white-space: nowrap;
}
</style>

App.vue

<template>
  <v-app>
    <v-main> <Stepper /> </v-main>
  </v-app>
</template>

<script>
import Stepper from "./components/Stepper";
export default {
  name: "App",
  components: {
    Stepper,
  },
  data: () => ({
    //
  }),
};
</script>

Rober19 Rober19 · Accepted Answer · 2020-10-15T18:19:00

If you are using Vuetify 2 you can use this way

export default new Vuetify({
  iconfont: 'mdi',
  //my custom colors
  theme: {
    dark: false, // here we need to set theme
    themes: {
      /*
      ? comments structure [light] - [dark]
      */
      light: {
        custm_theme_1: '#ffffff', // white - black
        custm_theme_2: '#F75E60', // pink - black
        custm_theme_3: '#000000', // black - white
        custm_theme_4: '#ffffff', // white - white       
      } ,
      dark: {
        /*
          ? comments structure [light] - [dark]
        */
        custm_theme_1: '#000000', // white - black
        custm_theme_2: '#000000',// pink - black
        custm_theme_3: '#ffffff', // black - white
        custm_theme_4: '#ffffff', // white - white
     
      }
    },
    options: {
      customProperties: true,
      // themeCache
    },
  }
});

and ways to use it ( on any vuetify )

html (vue)

1

 class="custm_theme_2--text"

2

 class="custm_theme_2"

3

 style="color: var(--v-custm_theme_2-base) !important"

4

 color="custm_theme_2"
 text-color="white" # or custm_theme_2
 background-color="amber lighten-4"

css

color: var(--v-custm_theme_2-base) !important;

Vuetify Theme Not Working with Custom Theme

1 Answers

html (vue)

css