¿Es posible cambiar el código hexadecimal de los colores descritos en esta página para Vuetify?
Digamos que quería alterar ligeramente el color red a algo más claro. ¿Cómo podría hacer eso?
Según los documentos, tengo algo como esto, pero quiero cambiar el color directamente:
import Vue from 'vue'; import Vuetify from 'vuetify'; Vue.use(Vuetify); export default new Vuetify({ theme: { themes: { light: { primary: '#123456' } } } });Si eso no es posible, ¿puedo agregar mi propio color? Me gusta:
colors: { foobar: '#eeeeee' }Verifique este codesandbox que hice: https://codesandbox.io/s/stack-70119394-mj4vk?file=/src/plugins/vuetify.js
Si desea tener su propio color personalizado disponible globalmente, no es necesario modificar la paleta de colores de Vuetify. Puede definirlos en el archivo de configuración de su tema vuetify.
Si hiciste tu proyecto con vue/cli
// src/plugins/vuetify.js import Vue from "vue"; import Vuetify from "vuetify"; import "vuetify/dist/vuetify.min.css"; Vue.use(Vuetify); export default new Vuetify({ theme: { themes: { light: { /* Default vuetify colors */ primary: "#1976D2", secondary: "#424242", accent: "#82B1FF", error: "#FF5252", info: "#2196F3", success: "#4CAF50", warning: "#FFC107", /* My custom colors */ perfectred: "#C51111" } }, options: { customProperties: true } } });Como puedes ver aquí he definido mi propio color llamado perfectred , con solo hacer esto podrás usar ese color en componentes vuetify con la propiedad color . Como hice en la barra de aplicaciones predeterminada.
<v-app-bar app color="perfectred" dark> ... </v-app-bar>Si desea utilizar su color personalizado en elementos no vuetify como html normal. Debe habilitar las opciones customProperties en la configuración de su tema. Al hacer esto, Vuetify también generará una variable css para cada color de tema, que luego puede usar en los bloques de estilo de sus componentes.
Entonces, para usar mi color perfectred en las etiquetas a en la página de inicio, simplemente creé una clase css global en mi App.vue para usar la variable css generada para mi color personalizado, también deberá usar !important para anular correctamente/ aplicar el color.
<style> .perfect-red { color: var(--v-perfectred-base) !important; } </style>Y así, podrá usar su clase de color personalizada en elementos html normales.
<p class="subheading font-weight-regular"> For help and collaboration with other Vuetify developers, <br />please join our online <a class="perfect-red" href="https://community.vuetifyjs.com" target="_blank"> Discord Community </a> </p>