Vuetify

ショップ

企業向け

プログラムでアプリケーションの色を簡単に変更できます。既定のスタイルシートを再構築し、ニーズに合わせてフレームワークのさまざまな個所をカスタマイズします。

テーマジェネレータ を使用してVuetifyアプリケーションの新しいカラーテーマを見つけて、生成してみてください。

Vuetify は、Material Design specのlightdarkバリアントの両方をサポートしています。この指定は、ルート アプリケーション コンポーネント 'v-app' から始まり、大部分のコンポーネントでサポートされています。既定では、アプリケーションは light テーマを使用しますが、theme serviceに dark オプションを追加すると簡単に上書きできます。

コンポーネントを "light" または "dark" として指定すると、特に指定がない限り、そのコンポーネントはすべて同じコンポーネントを継承して適用します。'this.$vuetify.theme.dark' を true または false に変更することで、手動で dark のオンとオフを切り替えることができます。

デフォルトでは、Vuetify はすべてのコンポーネントに適用される標準テーマを持っています。

次のように簡単に変更できます。theme プロパティを Vuetifyコンストラクタに渡すだけです。テーマプロパティのすべてを変更するか、一部のみを変更するかを選択でき、未指定の残りはデフォルトのものを継承します。

定義済みのマテリアルカラーを使用することもできます。

デフォルトでは、theme serviceはアプリケーションのprimaryカラーを anchor タグに使用します。これをオーバーライドするには、テーマにanchorプロパティを追加します。

Vuetify はこれらの値に基づいて css クラスを生成し、DOM でアクセスできるようにします。これらのクラスは他のヘルパークラス、例えば primarysecondary--text と同じマークアップに従います。カラーオブジェクト全体を指定した場合 (上記の colors.purple のように)、lighten/darken のバリエーションが生成されるのではなく、直接使われます。

これらの値は、インスタンス $vuetify オブジェクトの theme プロパティでも利用可能になります。これにより、テーマを 動的に 変更することができます。裏では、Vuetifyがテーマクラスを再生成して更新し、アプリケーションをシームレスに更新します。

Vuetifyはテーマカラーの lighten および darken バリアントを自動的に生成しますが、これを自分で制御することもできます。変更するバリアントを含むテーマオブジェクトを渡すだけです。提供されないものは引き続き生成されます。

これで、カスタムテーマオブジェクトをインポートしてVuetifyに適用できます。

以下は、themeオブジェクトの上書き可能なキーの完全なリストです:

テーマの機能を無効にするには、disableプロパティにtrueの値を指定します。これにより、Vuetifyスタイルシートの作成ができなくなります。

Vuetify generates theme styles at run-time for SPA's and server side for SSR applications. The generated styles will be placed in a <style> tag with an id of vuetify-theme-stylesheet.

The minifyTheme option allows you to provide a custom minification implementation. This helps to reduce the initial page size and is suggested to be paired with options.themeCache. In this example we use the minify-css-string package to minify the generated theme styles.

You have the option to pass a custom themeCache implementation. This allows you to skip the need to recalculate the theme object. Below is an example using the localStorage property:

Caching can also be done through lru-cache. This is specifically useful for SSR (Server Side Rendered) applications.

Enabling customProperties will also generate a css variable for each theme color, which you can then use in your components' <style> blocks.

script-src または style-src の CSP ルールを有効にしたページでは、埋め込まれたスタイルタグに nonce を指定する必要があるかもしれません。

When Vuetify generates your application's theme, it creates 9 variants for each color. For majority of users, these variants are rarely used. This is an opt in feature that will be false by default in the next major version.

Vuetifyのテーマシステムは、Vueの provide 機能を介して伝搬されます。提供されたテーマを手動で変更する必要がある状況があるかもしれません(ダークまたはライト)。

この例では、ボトムカードは $vuetify.theme.dark のルートを継承しています。

準備はいいですか? 以下から続きが読めます。

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!