Is it possible to change theme default text color in nuxt.config.js or by defining sass variable?

user_1838984 0
Viewed 800

I have Nuxt / Vuetify app with following configuration (nuxt.config.js)

vuetify: {
    customVariables: ['~/assets/sass/vuetify.sass'],

    theme: {
      themes: {
        light: {
          primary: '#e85730',          
        }
      }
    }
  }

So I can change primary color (applied eg. to button background). I am also able to change Vuetify variables in ~/assets/sass/vuetify.sass, eg.

$body-font-family: 'Poppins', sans-serif

But I am unable to change theme text color there. For light theme color is compiled to .theme--light.v-application with default value rgba(0, 0, 0, 0.87)

I can override it with CSS rule and same selector, but I don't like it much. I would rather keep theme changes at one place together (ideally in Nuxt config file or at least as sass variable). Is it even possible.

nuxt.js vuetify.js sass
1 Answers

This can be changed via the sass variables $material-light and $material-dark (https://vuetifyjs.com/en/api/vuetify/#sass-variables). But for the following button colors it will use always dark; primary, secondary, accent, success, error, warning and info.

$material-light: (
  'text': (
    'primary': 'yellow'
  )
);
$material-dark: (
  'text': (
    'primary': 'blue'
  )
);
user_100048600
Related