ショップ

企業向け

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

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

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

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

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

This can be easily changed. Simply pass a theme property to the Vuetify constructor. You can choose to modify all or only some of the theme properties, with the remaining inheriting from the default.

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

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

Under the hood, Vuetify will generate css classes based upon these values that will be accessible in the DOM. These classes will follow the same markup as other helper classes, primary or secondary--text for example. If you supply an entire color object (as in colors.purple above), the lighten/darken variations will be used directly instead of being generated.

These values will also be made available on the instance $vuetify object under the theme property. This allows you to dynamically modify your theme. Behind the scenes, Vuetify will regenerate and update your theme classes, seamlessly updating your application.

While Vuetify automatically generates lighten and darken variants for theme colors, you may want to control this yourself. Simply pass a theme object that contains the variants that you wish to modify. Anything not provided will still be generated for you.

You can now import your custom theme object and apply it to Vuetify

Below is a full list of the overwritable keys on the theme object:

You can disable theme functionality by using the disable property with a value of true. This will prevent the creation of the Vuetify stylesheet.

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 the id of vuetify-theme-stylesheet.

For SSR applications, you can pass a callback function to $vuetify.theme.options.minifyTheme to reduce the initial page size. When using this option, it is recommended to also use themeCache.

A custom caching object can be provided (works in tandem with minifyTheme) to increase SSR efficiency. The object must contain a get and a set method. Below is an example using LRU cache.

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

Pages with the script-src or style-src CSP rules enabled may require a nonce to be specified for embedded style tags.

The Vuetify theme system is propagated through the provide functionality in Vue. There may be situations in which you need to manually change the provided theme (dark or light).

In this example, the bottom card inherits from the root of $vuetify.theme.dark.

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

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