Customize your application’s default text colors, surfaces, and more. Easily modify your theme programmatically in real time. Vuetify comes with standard support for light and dark variants.
\nVuetify comes with two themes pre-installed,
Example with only the defaultTheme value
\nimport { createApp } from 'vue'\nimport { createVuetify } from 'vuetify'\n\nexport default createVuetify({\n theme: {\n defaultTheme: 'dark'\n }\n})\nAdding new themes is as easy as defining a new property in the theme.themes object. A theme is a collection of colors and options that change the overall look and feel of your application. One of these options designates the theme as being either a light or dark variation.\nThis makes it possible for Vuetify to implement Material Design concepts such as elevated surfaces having a lighter overlay color the higher up they are. Find out more about dark themes on the official
import { createApp } from 'vue'\nimport { createVuetify } from 'vuetify'\n\nconst myCustomLightTheme = {\n dark: false,\n colors: {\n background: '#FFFFFF',\n surface: '#FFFFFF',\n 'surface-bright': '#FFFFFF',\n 'surface-light': '#EEEEEE',\n 'surface-variant': '#424242',\n 'on-surface-variant': '#EEEEEE',\n primary: '#1867C0',\n 'primary-darken-1': '#1F5592',\n secondary: '#48A9A6',\n 'secondary-darken-1': '#018786',\n error: '#B00020',\n info: '#2196F3',\n success: '#4CAF50',\n warning: '#FB8C00',\n },\n variables: {\n 'border-color': '#000000',\n 'border-opacity': 0.12,\n 'high-emphasis-opacity': 0.87,\n 'medium-emphasis-opacity': 0.60,\n 'disabled-opacity': 0.38,\n 'idle-opacity': 0.04,\n 'hover-opacity': 0.04,\n 'focus-opacity': 0.12,\n 'selected-opacity': 0.08,\n 'activated-opacity': 0.12,\n 'pressed-opacity': 0.12,\n 'dragged-opacity': 0.08,\n 'theme-kbd': '#212529',\n 'theme-on-kbd': '#FFFFFF',\n 'theme-code': '#F5F5F5',\n 'theme-on-code': '#000000',\n }\n}\n\nexport default createVuetify({\n theme: {\n defaultTheme: 'myCustomLightTheme',\n themes: {\n myCustomLightTheme,\n },\n },\n})\nExample with only the defaultTheme value
\nimport { createApp } from 'vue'\nimport { createVuetify } from 'vuetify'\n\nexport default createVuetify({\n theme: {\n defaultTheme: 'dark',\n },\n})\nWhen using Typescript you may use the
import { createApp } from 'vue'\nimport { createVuetify, type ThemeDefinition } from 'vuetify'\n\nconst myCustomLightTheme: ThemeDefinition = {\n dark: false,\n colors: {\n background: '#FFFFFF',\n surface: '#FFFFFF',\n primary: '#6200EE',\n 'primary-darken-1': '#3700B3',\n secondary: '#03DAC6',\n 'secondary-darken-1': '#018786',\n error: '#B00020',\n info: '#2196F3',\n success: '#4CAF50',\n warning: '#FB8C00',\n },\n}\n\nexport default createVuetify({\n theme: {\n defaultTheme: 'myCustomLightTheme',\n themes: {\n myCustomLightTheme,\n },\n },\n})\nThis is used when you need to change the theme during runtime
\n<template>\n <v-app>\n <v-btn @click=\"toggleTheme\">toggle theme</v-btn>\n ...\n </v-app>\n</template>\n\n<script setup>\nimport { useTheme } from 'vuetify'\n\nconst theme = useTheme()\n\nfunction toggleTheme () {\n theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'\n}\n</script>\nYou should keep in mind that most of the Vuetify components support the theme prop. When used a new context is created for that specific component and all of its children. In the following example, the
<template>\n <v-app>\n <v-card theme=\"dark\">\n <!-- button uses dark theme -->\n <v-btn>foo</v-btn>\n </v-card>\n </v-app>\n</template>\nYou can use the
<template>\n <v-app>\n <!-- uses the current default theme -->\n <v-card>...</v-card>\n\n <v-theme-provider theme=\"high-contrast\">\n <!-- uses the high-contrast theme -->\n <v-card>...</v-card>\n <v-btn>...</v-btn>\n </v-theme-provider>\n </v-app>\n</template>\nThe Vuetify theme system supports adding custom colors. When configuring the Vuetify theme settings, add your custom colors to the colors object and Vuetify will generate a number of CSS classes and variables for you to use in your application.
\nimport { createApp } from 'vue'\nimport { createVuetify } from 'vuetify'\n\nexport default createVuetify({\n theme: {\n defaultTheme: 'myCustomTheme',\n themes: {\n myCustomTheme: {\n dark: false,\n colors: {\n ..., // We have omitted the standard color properties here to emphasize the custom one that we've added\n something: '#00ff00',\n },\n },\n },\n },\n})\nCustom properties for colors are a list of
<template>\n <div class=\"bg-something on-something\">background color with appropriate text color contrast</div>\n\n <div class=\"text-something\">text color</div>\n\n <div class=\"border-something\">border color</div>\n</template>\n\n<style>\n .custom-class {\n background: rgb(var(--v-theme-something))\n color: rgba(var(--v-theme-on-something), 0.9)\n }\n</style>\nThe Vuetify theme system can help you generate any number of variations for the colors in your theme. The following example shows how to generate 1 lighten and 2 darken variants for the
import { createApp } from 'vue'\nimport { createVuetify } from 'vuetify'\n\nexport default createVuetify({\n theme: {\n defaultTheme: 'myCustomTheme',\n variations: {\n colors: ['primary', 'secondary'],\n lighten: 1,\n darken: 2,\n },\n themes: {\n //\n },\n },\n})\n<template>\n <div class=\"text-primary-lighten-1\">text color</div>\n\n <div class=\"text-primary-darken-1\">text color</div>\n\n <div class=\"text-primary-darken-2\">text color</div>\n</template>\nThe theme functionality can be disabled by setting the theme configuration property to
import { createApp } from 'vue'\nimport { createVuetify } from 'vuetify'\n\nexport default createVuetify({\n theme: false,\n})\ninterface ThemeInstance {\n /**\n * Raw theme objects\n * Can be mutated to add new themes or update existing colors\n */\n themes: Ref<{ [name: string]: ThemeDefinition }>\n\n /**\n * Name of the current theme\n * Inherited from parent components\n */\n readonly name: Ref<string>\n\n /** Processed theme object, includes automatically generated colors */\n readonly current: Ref<ThemeDefinition>\n readonly computedThemes: Ref<{ [name: string]: ThemeDefinition }>\n\n readonly global: {\n /** Name of the current global theme */\n name: Ref<string>\n\n /**\n * Processed theme object of the current global theme\n * Equivalent to `theme.computedThemes.value[theme.global.name.value]`\n */\n readonly current: Ref<ThemeDefinition>\n }\n}\nPages with the
<!-- Use with script-src -->\nContent-Security-Policy: script-src 'self' 'nonce-dQw4w9WgXcQ'\n\n<!-- Use with style-src -->\nContent-Security-Policy: style-src 'self' 'nonce-dQw4w9WgXcQ'\n// src/plugins/vuetify.js\n\nimport {createVuetify} from 'vuetify'\n\nexport const vuetify = createVuetify({\n theme: {\n cspNonce: 'dQw4w9WgXcQ',\n },\n})\nVuetify generates theme styles at runtime according to the given configuration. The generated styles are injected into the
An application using microfrontends with multiple instances of Vuetify may need to define unique theme.stylesheetId values for each microfrontend in order to prevent conflicts between their generated stylesheets.\nFurther, such a scenario might require styles to be scoped to a specific microfrontend, which can be achieved by setting the theme.scope property.\nFor example, a microfrontend mounted in an element