Nuxt + Vuetify. How to apply theme colors

10
votes

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?

3
vue.jsvuetify.jsnuxt.js
Possible duplicate of How To change theme colors on Nuxt/Vuetify starter template - Traxo
Already checked this, did not work for me - isebarn
Then I suggest add more details. Question basically looks same to me at this state. What do you mean by "this", and what did "not work"? - Traxo
It had no effect when I changed the theme, according to the suggestions in the link you provided. - isebarn
And there isnt that much info to give that I know of, I'm using a quickstart template from nuxt, this quickstart template, amongst other stuff, created a bunch of files. Changing the theme object as described above made no difference. I think that what I need is to include something in the nuxt.config.js file, but I dont know - isebarn

3 Answers

18
votes

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
votes

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'
      // ...
    }
  },
1
votes

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.