如何在 nuxtjs 中用作 vuetify 主题 colors

Question

我使用 create nuxt app 创建了一个 nuxt 应用程序，在创建时我选择了 vuetify 框架。 在nuxt.config.js文件中有一个 object 配置一个主题的 colors。

vuetify: {
    customVariables: ['~/assets/variables.scss'],
    theme: {
      themes: {
        mainTheme: {
          primary: '#8B0000',
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3,
        },
      },
    },
  },
  ...
}

我正在尝试查找有关如何在我的 vue 组件中使用这些 colors 的文档，但我对此感到很困惑，到目前为止我还无法做到。

<template>
  <v-toolbar color="#8B0000">
    <v-container>
      <v-row>
        <h1 class="title">Abner Matheus</h1>
      </v-row>
    </v-container>
  </v-toolbar>
</template>

<script>
export default {}
</script>

<style scoped>
.title {
  color: azure;
}
</style>

我希望我的 v-toolbar 上的颜色属性接收我的主题 colors 之一。 有谁知道如何做到这一点？

Answer 1

您可以使用color="primary" ：

<template>
  <v-toolbar color="primary">
    <v-container>
      <v-row>
        <h1 class="title">Abner Matheus</h1>
      </v-row>
    </v-container>
  </v-toolbar>
</template>

对于您可以使用的其他元素：

<span class="primary--text">Text</span>

有关详细信息，请参阅Colors 。