Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 819
Danilo de maria Avatar asked Apr 16 '20 20:04

Danilo de maria


People also ask

How do I change my Vuetify theme color?

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.

How do you add a background color on Vuetify?

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.

How do I override Vuetify sass?

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.


1 Answers

Like this:

.default-box-layout {
    padding: 15px;
    border: 1px solid var(--v-primary);
    background-color: var(--v-background);
    width: 100%;
    margin: 0;
}
like image 118
Jason Landbridge Avatar answered Oct 05 '22 09:10

Jason Landbridge