Tema

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

Vuetify soporta variantes tanto light como dark del spec de Material Design. Esto se aplica desde el componente raíz v-app y está soportado por la mayoría de los componentes. Por default, tu aplicación usará el tema light, pero puedes sobreescribirlo al agregar la propiedad dark.

Cuando designas a un componente como light o dark, todos sus hijos heredarán y aplicarán el mismo estilo a menos que se especifique lo contrario. Debido a la especificidad de CSS, hay ciertas combinaciones que harán que tengas que asignar manualmente el tema para hijos anidados. Esto podría darse más a menudo cuando usas el tema dark.

Por default, Vuetify tiene un tema estándar aplicado a todos sus componentes.

Esto puede ser cambiado fácilmente. Tan sólo pasa la propiedad theme a la función Vue.use. Puedes escoger modificar todo o sólo algunas de las propiedades del tema, con el resto siendo heredado desde el tema default.

También puedes usar los colores de Material predefinidos..

Por debajo, Vuetify generará las clases de CSS que serán accesibles en el DOM basado en estos valores. Estas clases seguirán el mismo markup que otras clases auxiliares, por ejemplo primary o secondary--text.

Estos valores también estarán disponibles en el objeto instancia $vuetify en la propiedad theme. Esto permite que puedas modificar tu tema dinámicamente. Tras bambalinas, Vuetify regenerará y actualizará tus clases del tema, haciendo que tu aplicación se vea diferente de manera fluida.

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:

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.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 CSP rule enabled may require a nonce to be specified for embedded style tags.

Vuetify está construido sobre stylus. De manera similar a scss, puedes cambiar las variables y recompilar los archivos de estilos. Una lista de variables disponibles se encuentra aquí. A fin de generar el archivo stylus, necesitarás configurar tu aplicación para que soporte a stylus. Si estás usando una de las plantillas prefabricadas disponibles en el Inicio Rápido, puedes omitir la sección que viene.

En la línea de comandos, ejecuta:

Esto instalará las dependencias necesarias para importar y parsear los archivos de stylus. Una vez instaladas, abre tu config de webpack y agrega una regla para stylus. Para aplicaciones basadas en SSR, asegúrate de que el import se haga en tu client-entry principal.

Crea una carpeta llamada stylus dentro de tu carpeta src (o una carpeta de assets apropiada) con un archivo llamado main.styl. Esto servirá como el punto de entrada (entry point) y reconstruirá los estilos por default de Vuetify. Una vez creado, abre el archivo .styl y agrega esta entrada:

Toma en cuenta que la ubicación relativa de node_modules puede variar en tu proyecto así que haz los cambios necesarios. Se recomienda que el import se ubique en tu archivo index.js o en client-entry.js. NO IMPORTES tu archivo main.styl dentro de un componente. Esto causará problemas de rendimiento y hará más lento el HMR (hot module reloading).

Ya que decidiste la ubicación de tu import, si estás trayendo la hoja de estilos de Vuetify con una etiqueta <link> en tu archivo index, quítala. Reinicia tu proceso de build y abre tu proyecto de nuevo. Deberás ver todos los archivos funcionando correctamente.

Ahora que stylus ha sido configurado, puedes configurar también los valores por default de las variables que quieres cambiar. Estos deben ser declarados antes del import y automáticamente sobreescribirán los defaults de Vuetify.