Nuxt + Vuetify. How to apply theme colors

问题

I am using a Nuxt.js + Vuetify.js project

Looking at the file assets/style/app.styl we have

// Import and define Vuetify color theme
// https://vuetifyjs.com/en/style/colors
@require '~vuetify/src/stylus/settings/_colors'
$theme := {
  primary:     $blue.darken-2
  accent:      $blue.accent-2
  secondary:   $grey.lighten-1
  info:        $blue.lighten-1
  warning:     $amber.darken-2
  error:       $red.accent-4
  success:     $green.lighten-2
}

// Import Vuetify styling
@require '~vuetify/src/stylus/main'

.page
  @extend .fade-transition

The problem is, changing these theme colors does not result in any changes.

Any ideas how to solve this?

回答1:

Docs not telling how to change color properly...

first of all you need to set your current theme and then config it. I've waste 4 hours to figure this out. You need to change you config accordingly:

vuetify: {
        theme: {
            light: true,  //you don't actually need this line as it's for default
            themes: {
                light: {
                    primary: '#b71c1c',
                    ...
                }
            }
        }
    },

While working on this problem I figured out that you also can freely add your colors like this:

vuetify: {
        theme: {
            themes: {
                light: {
                    'custom-color-one': '#b71c1c',
                    'custom-color-two': '#3B8070',
                    ...
                }
            }
        }
    },

and then in your HTML:

<div class='custom-color-one'>
  I'am div with custom background color!
</div>

<div class='custom-color-one--text'>
  I'am div with custom text color!
</div>

回答2:

Not sure, but try this maybe, depends how vuetify is included, but I presume if you used vuetify nuxt template then you need to include it in your nuxt.config.js file.
If you included vuetify like so:

modules: [
 '@nuxtjs/vuetify'

Then add theme like so:

module.exports = {
  modules: [
    '@nuxtjs/vuetify'
    // ...
  ]
  // Add the following:  
  vuetify: {
    theme: {
      secondary: '#ff0000'
      // ...
    }
  },

来源：https://stackoverflow.com/questions/56074338/nuxt-vuetify-how-to-apply-theme-colors

标签

Vue.js

vuetify.js

nuxt.js