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

Posted 2023-02-23

【中文标题】Vuetify 主题不适用于自定义主题

【英文标题】：Vuetify Theme Not Working with Custom Theme

【发布时间】：2021-01-29 11:00:03

【问题描述】：

我正在尝试调整 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>

【参考方案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;