Can I pass CSS Variables to Vuetify theme colors?-CodePudding

I'm using Vue 2 with Nuxt. How can I achieve that Vuetify puts everywhere, where the color is used a CSS Variable use var(--X)?
I want to dynamically change the colors of the Vue theme.

{
  theme: {
    themes: {
      light: {
        primary: 'var(--primaryColor)', // <== Put CSS Variables in here
        secondary: 'var(--secondaryColor)'
      },
    },
  },
}

When I'm doing this all the colors are just white #FFFFFF.

CodePudding user response：

You're doing this configuration in nuxt.config.js I guess? That file have no idea about any kind of window or CSS so far.

You would need to either import hardcoded CSS variables from elsewhere or write them there directly (since it's quite at the apex, it's totally fine). The #fff fallback is probably a fallback in case of undefined or alike.

As of directly changing the colors of Vuetify, here is the section regarding the customization, I quote

Under the hood, Vuetify will generate css classes based upon these values that will be accessible in the DOM. These classes will follow the same markup as other helper classes, primary or secondary--text for example. If you supply an entire color object (as in colors.purple above), the lighten/darken variations will be used directly instead of being generated.

These values will also be made available on the instance $vuetify object under the theme property. This allows you to dynamically modify your theme. Behind the scenes, Vuetify will regenerate and update your theme classes, seamlessly updating your application.

Updating those values could hence be done like that

// Light theme
this.$vuetify.theme.themes.light.primary = '#4caf50'

// Dark theme
this.$vuetify.theme.themes.dark.primary = '#4caf50'

PS: The great thing is that the lighten/darken variants will also be done for you.