Vuetify でデフォルトの色をカスタマイズするにはどうすればよいですか?

Question

<p>おそらく私の問題は単純ですが、今まで解決策が見つかりませんでした。 Nuxt アプリケーションで <strong>Vuetify</strong> を使用しています。ダークテーマを使用しました。公式ウェブサイトのテーマ構成に従って、テーマの プライマリ 、 セカンダリ またはその他の色を希望の色に変更できます。ただし、<strong>ダーク テーマ</strong> に設定すると、デフォルトのテキストと背景の色が白と黒に設定されます。それらを変更する解決策が見つかりません。たとえば、要素の背景色を変更するために <code>class="primary"</code> を設定できることはわかっています。ただし、次のようにテキストまたは背景のデフォルトの色を設定したいと思います: </p> <p> <pre class="brush:css;toolbar:false;">body { 色: var(--v-info-base); } /* または */ ＃アプリ { 色: var(--v-info-base); }</pre> </p> <p>私の Web サイトの色は、次のように nuxt.config.js ファイルで定義されています。 </p> <p> <pre class="brush:js;toolbar:false;">vuetify: { カスタム変数: ['~/assets/variables.scss']、 テーマ： { ダーク: 本当、 オプション: {customProperties: true }、 テーマ: { 暗い： { 主要な： { ベース: "#099b63", 暗くする1: "#04c279" }、 アクセント: "#250032"、 セカンダリ: "#97812F", 情報： { ベース: "#1FFFF1"、 darken1: "#450b5a", darken2: "#1125c0", ダーケン3: "#40bfa4" }、 警告: color.amber.base、 エラー: color.deepOrange.accent4、 成功: Colors.green.accent3、 アンカー: "#1FFFF1" } }、 } },</pre> </p> <p>しかし、それは私にはうまくいきません! ！ ！ </p>

Answer 1

これを実現するには、vuetify の sass 変数をオーバーライドする必要があります。 使用例はドキュメントにあります

たとえば、variables.scss では、次のコードを使用できます:

リーリー

これにより、ダーク モードのデフォルトの背景色とテキスト色が上書きされます。