Vuetifyのthemeをcssで使用する

はじめに

Nuxt + Vuetifyにて、themeを使って統一した色のUIを実装しようと思っていたのですが
themeで設定した色をcssで使う方法ってないのかなと色々ググった際の備忘録をこちらに記載します。
間違い等ございましたらご指摘いただけますと幸いです。

環境

• Nuxt.js 2.15.8
• Vuetify 2.6.12

結論

これで実装できました。

nuxt.config.js

theme: {
      dark: false,
      light: true,
      themes: {
        light: {
          primary: '#1976D2',
          secondary: '#424242',
          accent: '#82B1FF',
          error: '#FF5252',
          info: '#2196F3'
        },
      },
     // customProperties を有効にすると、css 変数 を各テーマの色ごとに生成する
      options: { customProperties: true },
    },

page.vue

<style scoped>

/* var(--v-{テーマ名}-base) で実装する */
.bg {
  background-color: var(--v-primary-base);
  color: var(--v-secondary-base);
}

</style>

経緯

ここからは経緯となります。時間がある方だけ読んでいただけますと幸いです。
vuetifyでは実装できない細かい機能（マーカーのような下線）を実装しようと思いましてcssにて実装しました。
ただ、基本的にはthemeで色を設定していたので、cssに直接色を設定するのは冗長的になりそうで嫌でした。

そんな時に下記記事を拝見しまして、その通り実装したら成功しました。

この実装により、色を変更したいと思った際に
theme部分の色を変えるだけで一気に全ての色が変わるので
とってもハッピーです。

ちなみに後から気づきましたが、公式のドキュメントにも記載ありました。。。
完全なる見落としです。。

おわり。