Theme

Découvrez et générez de nouveaux thèmes de couleur pour vos applications Vuetify en utilisant notre outil Générateur de thème.

Vuetify supporte les variantes light et dark de la spec Material Design. Cette désignation commence au composant racine de l'application, v-app et est supportée par la majorité des composants. Par défaut, votre application utilisera le thème light mais cela peut être facilement changé en ajoutant l'option dark dans le service de thème.

Lorsque vous désignez un composant comme light ou dark, tous ses enfants hériteront et appliqueront le même si vous ne le spécifiez pas autrement. Vous pouvez activer ou désactiver manuellement dark en changeant this.$vuetify.theme.dark en true ou false.

Par défaut, Vuetify a un thème standard appliqué à tous les composants.

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.

Vous pouvez également utiliser les couleurs Material prédéfinies.

Par défaut, le service de thème utilisera la couleur principale de votre application pour les tags anchor . Vous pouvez l'écraser en ajoutant une propriété anchor au thème :

Derrière la scène, Vuetify générera des classes css basées sur ces valeurs qui seront accessibles dans le DOM. Ces classes suivront le même balisage que d'autres classes utilitaires, primary ou secondary--text par exemple. Si vous fournissez un objet de couleur entier (comme colors.purple ci-dessus), les variations lighten/darken seront utilisées directement au lieu d'être générées.

Ces valeurs seront également rendues disponibles dans l'instance $vuetify dans la propriété theme . Cela vous permet de dynamiquement modifier votre thème. Derrière la scène, Vuetify régénèrera et mettra à jour vos classes de thème, mettant à jour votre application de manière transparente.

Alors que Vuetify génère automatiquement des variantes lighten et darken pour les couleurs du thème, vous pourriez vouloir les contrôler vous-même. Passez simplement un objet de thème qui contient les variantes que vous souhaitez modifier. Tout ce qui n'est pas fourni sera toujours généré pour vous.

Vous pouvez maintenant importer votre objet personnalisé et l'appliquer à Vuetify

Ci-dessous une liste complète des clés réinscriptibles de l'objet thème :

Vous pouvez désactiver la fonctionnalité du thème en utilisant la propriété disable avec une valeur de true. Cela empêchera la création de la feuille de style 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.

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

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.

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.