Nuxt + Vuetify. How to apply theme colors

Question

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?

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

Answer 2

NOTE: This solution isn't the best approach, and will not work in a production environment. It works for workflows where a static site is deployed (i.e. when you run yarn build and deploy that), since changes in node_modules aren't persistent across installs.

Two files govern this - nuxt.config.js and node_modules/vuetify/es5/colors.js.

You need to open nuxt.config.js, and head over to the vuetify property. The themes property under the vuetify: {...} section lets you map the class names to configured color variables.

Further, to change the values of the colour variables, modify the file node_modules/vuetify/es5/colors.js. Here, you define any colors you need to whatever hex color code you want.