如何在 Vuetify 中自定义主题颜色？答案

【问题标题】：How to customize the theme colors in Vuetify?如何在 Vuetify 中自定义主题颜色？
【发布时间】：2021-03-07 22:22:33
【问题描述】：

graphQL 和 apollo 没问题。

打字稿AllColors.ts是：

import gql from 'graphql-tag'
export const ALL_COLORS = gql`
    query allColors {
        allColors {
            primary
            secondary
        }
    }
`

我在plugin/vuetify.ts 中试过这个，但不会走路。

import   Vue          from 'vue';
import   Vuetify      from 'vuetify/lib/framework';
import   colors       from 'vuetify/lib/util/colors';
import { ALL_COLORS } from '@/graphql/AllColors'

Vue.use(Vuetify);

export default new Vuetify({
  data() {
    return {
      allColors: []
    }
  },
  theme: {
    themes: {
      dark: {
        primary:    this.allColors.primary,
        secondary:  this.allColors.secondary
      },
    },
  },
  apollo: {
    allColors: {
      query: ALL_COLORS
    }
  }
});

给出这个错误：

 DONE  Compiled successfully in 240ms                                                                              12:54:25

Type checking in progress...

  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.0.102:8080/

ERROR in /home/user1/sites/app1/src/plugins/vuetify.ts(24,19):
26:19 Element implicitly has an 'any' type because type 'typeof globalThis' has no index signature.
    24 |         primary: this.allColors.primary,
       |                       ^
    25 |         secondary: this.allColors.secondary
    26 |       },
    27 |     },
    28 |   },

ERROR in /home/user1/sites/app1/src/plugins/vuetify.ts(25,21):
26:19 Element implicitly has an 'any' type because type 'typeof globalThis' has no index signature.
    24 |         primary: this.allColors.primary,
    25 |         secondary: this.allColors.secondary
       |                         ^
    26 |       },
    27 |     },
    28 |   },
Version: typescript 3.9.7
Time: 313ms

有什么想法吗？

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

您似乎将Vue 构造函数和Vuetify 构造函数混为一谈。只有前者有data() 用于创建本地反应属性，apollo 属性用于vue-apollo。

纠正问题：

在@/plugins/vuetify.ts 中，从Vuetify 构造函数选项中删除data() 和apollo，并将apollo 移动到main.ts 中的Vue 构造函数。
在使用主题设置创建 Vuetify 实例之前，将 allColors 移动到顶层。

// @/plugins/vuetify.ts
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import 'vuetify/dist/vuetify.min.css';

Vue.use(Vuetify);

const allColors = {
  primary: '#1976D2',
  secondary: '#424242',
}

export default new Vuetify({
  theme: {
    themes: {
      dark: {
        primary:   allColors.primary,
        secondary: allColors.secondary
      },
    },
  },
});

// main.ts
import Vue            from 'vue';
import vuetify        from '@/plugins/vuetify';
import { ALL_COLORS } from '@/graphql/AllColors'

new Vue({
  vuetify,
  apollo: {
    allColors: {
      query: ALL_COLORS
    }
  }
});

【讨论】：

如果您使用的是浅色主题，请记住也要更改它们

【解决方案2】：

Vuetify 不喜欢你调用 allColors 的方式，因为它不能识别变量：我假设在 API 调用中定义了主要颜色和次要颜色。然后你仍然需要指定它们的路径。 vuetify中的颜色是如何存储的？因为看起来变量路径不完整，所以可能更像这样：this.apollo.AllColors.query.response.data.primary（你可能不需要说 response.data） SASS variables 可以帮你存储颜色变量。

【讨论】：