Vuetify: Changing hexcode of a color-CodePudding

Is it possible to change the hexcode for the colors outlined on this page for Vuetify?

Say I wanted to slightly alter the red color to something lighter. How could I do that?

Per the docs I have something like this but I want to change the color directly:

import Vue from 'vue';
import Vuetify from 'vuetify';

Vue.use(Vuetify);

export default new Vuetify({
    theme: {
        themes: {
            light: {
                primary: '#123456'
            }
        }
    }
});

If that isn't possible, can I add my own color? Like:

colors: {
  foobar: '#eeeeee'
}

CodePudding user response：

Check this codesandbox I made: https://codesandbox.io/s/stack-70119394-mj4vk?file=/src/plugins/vuetify.js

If you want to have your own custom color globally available, there's no need to modify Vuetify's color palette. You can define them in your vuetify theme configuration file.

If you made your 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 }
  }
});

As you can see here I have defined my own color called perfectred, just by doing this you'll be able to use that color in vuetify components with the color property. Like I did 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 normal html. You need to enable the customProperties options in your theme configuration. By doing this, Vuetify will also generate a css variable for each theme color, which you can then use in your components style blocks.

So, to use my perfectred color on the a tags in the homepage I simply created a global css class in my App.vue to use the css variable generated for my custom color, you'll also need to use !important to properly override/apply the color.

<style>
.perfect-red {
   color: var(--v-perfectred-base) !important;
}
</style>

And just like that, you'll be able to use your custom color class in normal html elements.

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