Vuetify3.0で文字色をVuetifyカラーにstyleで設定する方法 #Vue.js

概要

Vuetify3.0にアップデート後、Vuetify2と同様にVuetifyカラー（primaryなどの色）をstyleタグで設定できなくなってしまったので、その解決法をまとめます。
aタグはcolor='primary'の形で色の設定ができないため、aタグを例に説明します。

Vuetify2までのやり方

styleに書く場合、下記のようにcolor: var(--v-???-base);という記述をしていました。

<a style="color: var(--v-primary-base);">...</a>

また、この際customePropertiesをtrueにする必要があります。

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

export default new Vuetify({
  theme: {
    options: { customProperties: true },
  },
})

ここに関しては、下記の公式ドキュメントにて説明があります。
テーマの設定 -- Vuetify カスタムプロパティ

Vuetify3でのやり方

一方、Vuetify3では、下記のように記述するとVuetifyカラーをstyleタグで設定することができます。
変わった点としては

rgbで括る必要がある
baseを後ろにつける必要がなくなった代わりに、間にthemeを入れる必要がある

<a style="color: rgb(var(--v-theme-primary));">...</a>

また、この際Vuetify2とは異なり、customePropertiesの設定は不要です。（optionsプロパティ自体無くなった？）
公式ドキュメントの説明はこちら↓
Theme -- Vuetify Custom theme colors

最後に

最後まで読んでいただきありがとうございました！