Take a look at this codesandbox I created: https://codesandbox.io/s/stack-70119394-mj4vk?file=/src/plugins/vuetify.js
If you wish to have your own custom colors available globally, you don't have to alter Vuetify's color palette. You can simply define them in your vuetify theme configuration file.
For those who have built their project with 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 }
}
});
By defining your own color like I did with perfectred, you can easily use it in vuetify components with the color property. For example, in the default app-bar.
<v-app-bar app color="perfectred" dark>
...
</v-app-bar>
If you want to use your custom color in non-vuetify elements like regular html, make sure to enable the customProperties option in your theme configuration. This will create a css variable for each theme color which can be utilized in your components' style blocks.
To apply my perfectred color to the a tags in the homepage, I created a global css class in my App.vue that utilizes the css variable generated for my custom color. Remember to use !important for proper color application.
<style>
.perfect-red {
color: var(--v-perfectred-base) !important;
}
</style>
With these steps, you can now use your custom color class in regular html elements.
<p class="subheading font-weight-regular">
For assistance and cooperation with other Vuetify developers,
<br />please join our online
<a class="perfect-red" href="https://community.vuetifyjs.com" target="_blank">
Discord Community
</a>
</p>