CODEWITHSUNDEEP
vue.jssassvuetify.jsnuxt.js
Danilo de maria
Danilo de maria

Reputation: 71

NUXTJS + Vuetify - Colors in SCSS

I'm trying to get the colors from the nuxt.config.js file and put them directly in variables.scss

Currently my variables.scss look like this

@import '~vuetify/src/styles/styles.sass';

.button-blue {
    background-color: map-get($blue, darken-2) !important;
    color: map-get($blue-grey, lighten-5) !important;            
}

I would like to assign the color directly from nuxt.config, more or less this way:

@import '~vuetify/src/styles/styles.sass';

.button-blue {
    background-color: primary!important;
    color: seconday !important;            
}

My nuxt.config.js

css: ['~/assets/variables.scss'],
vuetify: {
    customVariables: ['~/assets/variables.scss'],
    theme: {
      dark: false,
      themes: {
        light: {
          primary: colors.blue.darken2,
          secondary: colors.orange.darken1,
          tertiary: colors.green.darken1,
          accent: colors.shades.black,
          error: colors.red.accent3,
          info: colors.green.darken3,
          background: '#EAEBEE'
        },
        dark: {
          primary: colors.blue.darken2,
          accent: colors.orange.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3,
          background: colors.red.accent3
        }
      }
    }
  }

Any suggestion? I'm using Vue + Vuetify + Nuxt

Upvotes: 7

Views: 1982

Answers (2)

Nebulosar
Nebulosar

Reputation: 1855

From the docs:

Enabling customProperties will also generate a css variable for each theme color, which you can then use in your components’ blocks.

So, when you add:

  theme: {
    options: { customProperties: true }, // this line
  },

to your Vuetify config, variables will get injected at the css root variables. Now, you can use things like --v-primary-base, like this:

.button-blue {
    background-color: var(--v-primary-base);
    color: var(--v-secondary-base) !important;            
}

More?
See https://vuetifyjs.com/en/features/theme/#custom-properties

Upvotes: 0

Jason Landbridge
Jason Landbridge

Reputation: 1402

Like this:

.default-box-layout {
    padding: 15px;
    border: 1px solid var(--v-primary);
    background-color: var(--v-background);
    width: 100%;
    margin: 0;
}

Upvotes: 1

Related Questions