vuetifyのカスタムカラーをvarで利用する

version
vue@3.2
vuetify@3.1

vuetifyでカスタムテーマを定義することありますよね。
特に色なんかはclassに埋めれば使えるようにしてほしいですが反映されない時がありますいまだに仕様が謎。

そんな時は最終手段としてvarで呼び出しましょう。
vuetifyのカスタムテーマはcssのルートに変数で定義されるのでvarで呼び出せるみたいです

Let's Go

カスタムカラー

vuetify.ts

 theme: {
      defaultTheme: 'light',
      themes: {
        light: {
          colors: {
            'aka': '#FF98BD',
          },
        },
      },
  }

ポイントはrgbに入れることです

hoge.vue

<style>
.aka {
  color: rgb(var(--v-theme-aka))
}
</style>