Vuetifyのv-btnのボタンの文字を白文字にしたいならdarkはおすすめしない

Vuetifyのv-btnの文字の白文字化にdarkを使わないで

Vuetifyを使い始めた当初はボタンの白文字化をするために安易にdarkを付与していました。
しかし、下記の文章からdarkでは本来目的としている挙動を得られない事が分かりました。
※使っていくうちに不都合が見つかる

https://vuetifyjs.com/ja/components/buttons/

v-btn は dark prop を使用したときに振る舞いが変化する唯一のコンポーネントです。通常のコンポーネントは dark prop を使用して暗い色の背景であることを明示し、テキストを白に変更する必要があります。しかし、v-btn では自動的にスタイルが変化するので、ボタンが白い背景と組み合わせて無効化されているときなど、色のついた背景の上に置かれているときのみこの prop を使用することをおすすめします。白いテキストが必要な場合は、ただ white-text クラスを追加するだけでテキストを白くできます。

白文字化はwhite--textで実現

Vuetifyのカラークラスを与えてあげることで文字を白くします。

<template>
  <div>
    <v-btn class="white--text">
     白文字のボタン
    </v-btn>
  </div>
</template>

注意！！

公式ではwhite-textと記載されていますがwhite--textが正解です。
ハイフンを一つ追加してください。

詳しく知りたい方は下記を参照
Vuetify Colors