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
This can be easily changed. Simply pass a theme property to the Vuetify constructor. You can choose to modify all or only some of the theme properties, with the remaining inheriting from the default. You can also use the pre-defined material colors.
To set background color with Vuetify, we can add our own theme colors. import Vue from "vue"; import Vuetify from "vuetify/lib"; import colors from "vuetify/lib/util/colors"; const vuetify = new Vuetify({ theme: { themes: { light: { primary: colors. purple, secondary: colors. grey.
You can override the Sass variables only there where you import the stylesheet using those. If you eg. import (directly or transitively) ~vuetify/src/components/VBtn/_variables. scss into your global stylesheet and then in your component (a separate stylesheet) you want to change $btn-text-transform , it won't work.
Like this:
.default-box-layout {
padding: 15px;
border: 1px solid var(--v-primary);
background-color: var(--v-background);
width: 100%;
margin: 0;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With