Vuetify：如何获取当前主题颜色？

Question

我正在使用 Nuxt 和 Vuetify。如果我写

<nuxt-link>

，Nuxt 会生成

<a>

标签，并且链接文本带有下划线和蓝色。

我可以按如下方式删除下划线：

a {
  text-decoration: none;
}

接下来，我要修复颜色。但是，颜色取决于主题（浅色模式或深色模式）。

如何获取当前模式文本颜色？

Answer 1

试试这个：

this.$vuetify.theme.currentTheme.primary

Answer 2

如果我没记错的话，可以通过

this.$vuetify.theme

访问它。

Answer 3

现在是 2023 年，Vue 3、Nuxt 3 和 Vuetify 3 已经出现了……那么该怎么办？

在我的例子中，我使用 Typescript 和脚本设置，因此要访问当前主题，我执行以下操作；

<script setup lang="ts">
  import { useTheme } from 'vuetify'

  const vTheme = useTheme()
  
  // use property
  const primaryColor = vTheme.current.value.colors.primary

  // use custom property with hyphens
  const myColor = vTheme.current.value.colors["my-color"]
</script>

有关从 useTheme() 返回的对象以及如何访问/更新主题/值的更多详细信息，请查看 Vuetify 3 主题文档的这一部分：

https://next.vuetifyjs.com/en/features/theme/#theme-object-struct