As doc said i used this to change default theme of my project:
Vue.use(Vuetify, {
theme: {
primary: '#ff0000',
secondary: '#ff0000',
accent: '#ff0000',
error: '#ff0000'
}
})
But nothing happens. Default primary color(#1976D2) is still there with no change. Why it is not working?
Editing theme with Vue.use is not supported in older versions of Vuetify.
Upgrading Vuetify to 0.17.0 or higher will solve your problem.
Related
The default vuetify themes have a very limited amount of properties to tweak.
dark: {
primary: '#3739FF',
accent: '#101721',
secondary: colors.amber.darken3,
info: colors.teal.lighten1,
warning: colors.amber.base,
error: colors.deepOrange.accent4,
success: colors.green.accent3
}
I want to have control over all the background colors.
I tried the answer from Dmitry Kaltovich
How To change theme colors on Nuxt/Vuetify starter template
By having a custom scss file like this
#import '~vuetify/src/styles/styles.sass';
$material-dark: map-merge(
$material-dark,
(
background: map-get($blue, 'lighten-5'),
)
);
and my nuxt config like this
vuetify: {
treeShake: true,
customVariables: ['~/assets/scss/vuetify.scss'],
theme: {
dark: true,
themes: {
options: {customProperties: true},
dark: {
primary: '#3739FF',
accent: '#101721',
secondary: colors.amber.darken3,
info: colors.teal.lighten1,
warning: colors.amber.base,
error: colors.deepOrange.accent4,
success: colors.green.accent3
}
}
}
},
But it does not work.
I'm using
"nuxt": "^2.14.6",
"#nuxtjs/vuetify": "^1.11.2",
"sass": "^1.29.0",
"sass-loader": "^7.3.1"
"fibers": "^5.0.0",
"node-sass": "^5.0.0",
Well everything is almost right except one thing.
You need to have sass-loader version 8.x to make it work with customVariables: part. Install it with npm install -D sass-loader#8 This because of sass-loader takes additional data different way in different versions. more information about sass-loader
After that, you should be able to override framework variables thru editing vuetify.scss file.
/* Example of `~assets/scss/vuetify.scss` */
#import '~vuetify/src/styles/styles.sass';
// theme to override, same applies for $material-light
$material-dark: map-merge(
$material-dark,
(
'background': rgb(130, 130, 130),
'text': (
'primary': map-get($grey, 'lighten-2'),
),
'calendar': (
background-color: red,
),
)
);
What happens in here is that we are overriding $material-dark variable that exist in node_modules/vuetify/src/styles/settings/_dark.scss. Here you can use any static value or pre-defined framework colors that exist in node_modules/vuetify/src/styles/settings/_colors.scss, with the help of map-get function as the colors are defined as key-value pair. So what you can do with this approach is, just find the background values (or anything else) you want to override inside _dark.scss, for dark theme.
Note that this approach is to override framework defaults. If you want to define any color and then use inside a component, this approach might not be what you are looking for, this works best to override defaults.
Second approach is to define your colors inside vuetify.theme.themes.dark that exist in nuxt.config.js
vuetify: {
treeShake: true,
customVariables: ['~/assets/scss/vuetify.scss'],
theme: {
dark: true,
themes: {
options: { customProperties: true },
dark: {
header: '#3739FF',
footer: '#101721'
},
},
},
},
Vuetify provides primary, secondary, accent, info, warning, error, success by default. If you change any of these values, they will be overwritten with yours. If you add any other value like header, footer, etc. they will be added with lighten/darken variants.
These values can be used in a couple of different ways:
with color/background/background-color props like <v-btn color="header" />
apply background with class <div class="primary" /> or custom <div class="footer" />
apply font color with class <div class="primary--text" /> or custom <div class="header--text" />
using lighten variant with <div class="header lighten-2" />
more info about colors
So the values you add here are not for overriding for component defaults, only to create extra colors or override primary, success, error etc. colors.
I have set up a button that when clicked, will change the theme. This initially worked fine until I wanted to change the card color to the secondary theme color. Like this:
<v-card
color="secondary"
>
This works as expected with the current theme, however, when I change the theme using the button, everything else changes except this component. I need this to change to the other theme's secondary color when the theme changes.
You can configure your Vuetify themes globally in Vuetify config object like this:
const vuetify = new Vuetify({
theme: {
themes: {
light: {
primary: '#3f51b5',
secondary: '#b0bec5',
accent: '#8c9eff',
error: '#b71c1c',
},
},
},
})
More info
Recently, I updated my package.json file and my vuetify updated to the newest and the dark theme is now very dark. it used to be more grey. I can't find anything to get back to this grey version of the dark theme in v2.
heres my code:
theme: {
dark:true,
themes: {
dark: {
primary: '#4caf50',
secondary: '#4caf50',
tertiary: '#495057',
accent: '#82B1FF',
error: '#f55a4e',
info: '#00d3ee',
success: '#5cb860',
warning: '#ffa21a',
general: '#2196F3',
purple: '#BA55D3',
dark: '#1c1c1c',
},
},
},
vuetify form
Hi I'm using vuetify form layout for login page but I want to change that primary color inside of scss file.
is there's any way that I can change that color?
You can change all your colors in the src/plugins/vuetify.js file.
For example:
// src/plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
const vuetify = new Vuetify({
theme: {
themes: {
light: {
primary: '#3f51b5',
secondary: '#b0bec5',
accent: '#8c9eff',
error: '#b71c1c',
},
},
},
Documentation on themes is here.
Change colors
I'm trying to use Vue with Nuxt and Vuetify for the styles, on Vuetify exists many templates, one of them brings all.
I tried to add colors on /assets/style/app.styl without effect.
Also on /plugins/vueitfy.js add something like:
Vue.use(Vuetify, {
theme: {
header: '#48393C',
footer: '#2f3542'
}
})
Without effects, i think that the last way is the best way for do it.
In Vuetify 2, for example, if you want ro override background colour (nuxt js):
Create .\assets\style\variables.scss
#import '~vuetify/src/styles/styles.sass';
$material-light: map-merge($material-light, (
background: map-get($blue, 'lighten-5'),
calendar: (background-color: red),
)
);
In nuxt.config.js add:
import colors from 'vuetify/lib/util/colors'
buildModules: ['#nuxtjs/vuetify'],
vuetify: {
treeShake: true,
customVariables: ['~/assets/style/variables.scss']
theme: {
options: {customProperties: true},
themes: {
light: {
primary: colors.blue.lighten5,
secondary: colors.amber.darken3,
accent: colors.grey.darken3,
info: colors.teal.lighten1,
warning: colors.amber.base,
error: colors.deepOrange.accent4,
success: colors.green.accent3
}
}
More info:
https://vuetifyjs.com/ru/customization/sass-variables
https://vuetifyjs.com/ru/customization/theme
There are two options to change the color theme
1. from the /plugins/vueitfy.js
Vue.use(Vuetify, {
theme: {
primary: '#2c3e50',
secondary: '#1abc9c',
accent: '#2980b9',
error: '#e74c3c',
action: '#23DB2A'
}})
From /assets/style/appl.styl, before the require of vuetify
$theme := {
primary: '#2c3e50',
secondary: '#1abc9c',
accent: '#2980b9',
error: '#e74c3c',
action: '#23DB2A'
}
And header and footer won't work as a color theme property