Vuetify 主题不适用于自定义主题

Question

我正在尝试调整 Vuetify 的主题颜色，但我的更改未注册。我看过其他几篇文章并复制了那里的代码，但无法使其工作。颜色仍然是默认的 Vuetify 原色。次要颜色也不会改变。

我尝试过的事情：

• 在
中包装应用
• 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>

Answer 1

如果你使用的是 Vuetify 2，你可以使用这种方式

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
    },
  }
});

以及使用它的方法（在任何 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;