I'm building a site with Vuetify/Nuxt and I'm customizing the theme in my nuxt.config.js file like this:
vuetify: {
customVariables: ['~/assets/variables.scss'],
treeShake: true,
theme: {
options: {
customProperties: true
},
dark: true,
themes: {
dark: {
background: '#291c07',
primary: '#7d521a',
accent: '#6b3d01',
secondary: '#3b280b',
grey: "#fff",
neutralgray: "#fff",
}
}
}
},
Then, in my variables.scss file, I have this:
$heading-font-family: 'Permanent Marker';
$body-font-family: 'Neucha';
$font-size-root: 24px;
#import '~vuetify/src/styles/styles.sass';
$material-light: map-merge($material-light, (
'background': var(--v-background-base, map-get($material-light, 'background')) !important,
));
$material-dark: map-merge($material-dark, (
'background': var(--v-background-base, map-get($material-dark, 'background')) !important
));
Everything is working as expected except for the font color of a Tabs component. It defaults to a grey value and I cannot figure out which of the color variables needs to be overwritten to change this default color. Does anyone know which variable controls the font/icons color in a Vuetify tabs component?
Can you inspect the gray color with your browser devtools, in the Elements tab. You'll see what is the used variable.
I gave it a try, and it looks like you need to override this selector
.theme--light.v-tabs>.v-tabs-bar
You maybe need to use it on $material--light? Not sure of your current configuration.
Related
I would like to change theme dynamically. I define a lightTheme and darkTheme li
export default createVuetify({
theme: {
defaultTheme: "lightTheme",
themes: {
lightTheme: {
dark: false,
colors: {
primary: "#ad1c3d",
"page-header-background": "#d7d7ce",
"page-background": "#cdcdc1",
"table-header": "#cdcdc1",
background: "#c0c0b5",
"header-background": "#b5b5a6",
"info-text": "#666660",
},
},
darkTheme: {
dark: true,
colors: {
primary: "#52E3C2",
"page-header-background": "#282831",
"page-background": "#32323E",
"table-header": "#2e2e2e",
background: "#3F3F4A",
"header-background": "#4a4a59",
"info-text": "#99999F",
},
},
},
},
});
I can access the theme using this.$vuetify.theme however I can't find how I can change the theme at runtime. The method of doing this in Vuetify 2 is different. I can't find any examples with Vuetify 3.
What is the correct method of changing theme dynamically in Vuetify 3?
It looks like the documentation is incorrect. The documentation says to use
this.theme.global.name.value = "themeName"
but actually it's
this.theme.global.name = "themeName"
Maybe my question was simple but I could not find any solution to that until now. I am using Vuetify in my Nuxt app. I used the dark theme of that. according to Theme configuration of the official website we can change primary or secondary or other colors of the theme with our desired colors. But when we set for example dark theme the default text and background colors are set to white and black. I could not find any solution to change them. I know that we can set for example class="primary" to an element to change its background-color. But I want to set a default color for text or background like this:
body {
color: var(--v-info-base);
}
/* or */
#app {
color: var(--v-info-base);
}
Where the colors of my website was defined in my nuxt.config.js file like this:
vuetify: {
customVariables: ['~/assets/variables.scss'],
theme: {
dark: true,
options: { customProperties: true },
themes: {
dark: {
primary: {
base: "#099b63",
darken1: "#04c279"
},
accent: "#250032",
secondary: "#97812F",
info: {
base: "#1FFFF1",
darken1: "#450b5a",
darken2: "#1125c0",
darken3: "#40bfa4"
},
warning: colors.amber.base,
error: colors.deepOrange.accent4,
success: colors.green.accent3,
anchor: "#1FFFF1"
}
},
}
},
But that does not work for me!!!
to achieve this you have to rewrite vuetify's sass variables, example on how to use in the Doc
so for example in your variables.scss you can have the following code:
$material-dark: (
'background': #464994,
'text': (
'theme': #944646,
)
);
this will rewrite the default colors for the background and text color in the dark mode.
Below was the old question, I realize the issue is not with the custom properties, but rather I have a component like the below, and 'active-class' is not being applied.
I tried to change the prop name to activeClass, doesn't seem to be working
<VListGroup
key={item.text}
class='drawer-item'
active-class='drawer-active-item'
>
I'm working on a new project using Vue, and trying to convert some old components (.vue) files to be using render functions and typescript (.tsx), and trying to separate the style contained in the <style/> blocks into a separate .less file.
While the template syntax, v-if and all can be converted quite easily, however I'm stuck on the part where if my style contains customProperties, https://vuetifyjs.com/en/features/theme/#custom-properties]]
specifically --v-primary-base, as the below
I have the below
.drawer-active-item {
color: white;
&::before {
background-color: var(--v-primary-base);
opacity: 1;
}
&:hover::before {
opacity: 0.8;
}
&::after {
background-color: var(--v-primary-base);
opacity: 1;
}
&:hover::after {
background-color: var(--v-primary-base);
opacity: 0.8;
}
}
Is there a way to access these custom css variables from the .less file? I've been googling things like 'access customProperties in less file` and things related, but I feel like perhaps I'm not asking the right question, or looking at the right resource for what I'm trying to achieve, pointers would be great, thank you.
I have a theme config that currently looks like the below, just for some context.
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import colors from 'vuetify/lib/util/colors';
Vue.use(Vuetify);
export default new Vuetify({
icons: {
iconfont: 'md',
},
theme: {
options: {
customProperties: true,
},
themes: {
light: {
primary: colors.blue.darken3,
},
dark: {
primary: colors.blue.darken3,
anchor: colors.blue.base,
},
},
},
});
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