Theme

Entdecken und generieren Sie neue Farbthemen für Ihre Vuetify-Anwendungen mit unserem Theme-Generator.

Vuetify unterstützt sowohl die helle als auch die dunkle Variante der Materialdesign-Spezifikation. Dies beginnt mit der Basis-Anwendungskomponente v-app und wird von den meisten Komponenten unterstützt. Standardmäßig wird Ihre Anwendung das helle Theme verwenden, aber dies kann leicht überschrieben werden, indem Sie die Option dark im Theme-Service hinzufügen.

Wenn Sie eine Komponente als Hell oder Dunkel markieren, werden alle Kinder dieser Komponente dieses erben und anwenden, sofern nicht anders angegeben. Sie können die Option Dark manuell ein- und ausschalten, indem Sie this.$vuetify.theme.dark zu true oder false ändern.

Standardmäßig hat Vuetify ein Standard-Theme für alle Komponenten.

Dies kann leicht geändert werden. Übergeben Sie einfach die Eigenschaft theme an den Vuetify-Konstruktor. Sie können alle oder nur einige der Theme-Eigenschaften ändern, wobei die restlichen Eigenschaften von der Standardeinstellung übernommen werden.

Sie können auch die vordefinierten Materialfarben verwenden.

Standardmäßig wird der Theme-Service die primäre Farbe der Anwendung für anchor-Tags verwenden. Sie können dies überschreiben, indem Sie dem Theme eine anchor-Eigenschaft hinzufügen:

Im Hintergrund generiert Vuetify CSS-Klassen, die auf diesen Werten basieren und im DOM zugänglich sein werden. Diese Klassen folgen dem gleichen Markup wie andere Helferklassen z.B. primary oder secondary--text. Wenn Sie ein ganzes Farbobjekt angeben (wie in colors.purple oben), werden die lighten/darken-Variationen direkt verwendeet, anstatt generiert zu werden.

Diese Werte werden auch im Instanz-Objeckt $vuetify in der Eigenschaft theme verfügbar gemacht. Dadurch können Sie Ihr Theme dynamisch ändern. Im Hintergrund wird Vuetify Ihre Theme-Klassen regenerieren und aktualisieren, um Ihre Anwendung sofort zu aktualisieren.

Während Vuetify automatisch lighten- und darken-Varianten für Ihre Themenfarben erzeugt, sollten Sie dies selbst kontrollieren. Übergeben Sie einfach ein Theme-Objekt, das die Varianten enthält, die Sie ändern möchten. Alles, was nicht zur Verfügung steht, wird für Sie generiert.

Sie können jetzt Ihr individuelles Theme-Objekt importieren und es auf Vuetify anwenden

Unten ist eine vollständige Liste der überschreibbaren Schlüssel zum Theme-Objekt:

Sie können die Theme-Funktionalität deaktivieren, indem Sie die Eigenschaft disable auf den Wert true setzen. Dies verhindert die Erstellung des Vuetify Stylesheets.

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.

Seiten mit aktivierten script-src- oder style-src-CSP-Regeln können eine nonce für eingebettete Tags erfordern.

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.

Das Vuetify Theme-System wird durch die provide-Funktionalität in Vue verbreitet. Es kann Situationen geben, in denen Sie das zur Verfügung gestellte Theme manuell ändern müssen (dark oder light).

In diesem Beispiel erbt die untere Karte von der Basis von $vuetify.theme.dark.