Question

我知道我可以导入颜色，所以我可以在JS中使用深紫色lighten-4，我将如何在下面的Vuetify主题部分中实际执行此操作？我需要添加Vue.use(colors)吗？

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.css'
import colors from 'vuetify/es5/util/colors'

import App from './App'
import router from './router'

Vue.use(Vuetify, { theme: {
  primary: '#ee44aa',
  secondary: '#424242',
  accent: '#82B1FF',
  error: '#FF5252',
  info: '#2196F3',
  success: '#4CAF50',
  warning: '#FFC107'
}})

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

Answer 1

来自docs：

import Vue from 'vue'
import Vuetify from 'vuetify'
import colors from 'vuetify/es5/util/colors'

Vue.use(Vuetify, {
  theme: {
    primary: colors.blue.darken4,
    secondary: colors.amber.lighten2
  }
})

您未在主题对象中指定的任何主题颜色仅由Vue指定其默认值。

Answer 2

只需使用color =＆＃34;＆＃34; ＆lt; - 然后你想要的颜色。

<v-btn color="success">Success</v-btn>

这是我的示例笔，用于更多示例

https://codepen.io/pen/?editors=1010

如何在vuetify中使用颜色

2 个答案: