Easily change the colors of your application programmatically. Rebuild the default stylesheet and customize various aspects of the framework for your particular needs.

Theme generator

Discover and generate new color themes for your Vuetify applications using our Theme Generator tool.

밝게, 어둡게 (Light and Dark)

Vuetify supports both light and dark variants of the Material Design spec. This designation starts at the root application component, v-app and is supported by majority of components. By default, your application will use the light theme, but this can be easily overwritten by adding the dark option in the theme service.

When you designate a component as light or dark, all of its children will inherit and apply the same unless otherwise specified. You can manually turn dark on and off by changing this.$vuetify.theme.dark to true or false.


기본적으로 표준 테마(standard theme)가 모든 컴포넌트에 적용됩니다.

이는 쉽게 변경될 수 있습니다. 간단히 theme 속성(property)으로 Vue.use 함수를 사용하세요. 또한 기본 테마의 속성을 상속하면서 동시에 모든 혹은 일부 테마 속성을 골라서 변경할 수 있습니다.

또한 미리 정의된 메테리얼 색상표를 사용할 수 있습니다.

By default, the theme service will use your application's primary color for anchor tags. You can override this by adding an anchor property to the theme:

내부적으로, Vuetify는 이 값들을 기반으로 DOM에서 사용될 수 있는 css 클래스들을 생성합니다. 이 클래스들은 예를 들어 primary or secondary--text 같은 다른 헬퍼 클래스들과 같은 형식으로 쓰입니다.

또한 이 값들은 $vuetify 인스턴스의 theme 속성아래 오브젝트로 설정할 수 있습니다. 이는 테마를 동적으로 바꾸는 것을 가능하게 합니다. 내부적으로는 Vuetifys는 테마 클래스들을 재생성하고 어플리케이션이 중단 없이 업데이트 되도록 클래스를 업데이트 합니다.

Custom theme variants

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:

Disable theme

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

옵션 (Options)

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 and 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.

Custom Properties

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

CSP Nonce

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

Edit this page on Github | Translate on Crowdin