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"
Related
I'm using Vuetify 3.0.4 with Vue 3 and I want to apply a custom color via a custom theme to my <v-switch>. I want to apply my custom primary color to it.
What doesn't seem to work:
<v-switch theme="myTheme" color="primary" inset></v-switch>
I defined my theme as:
const myTheme = {
dark: true,
colors: {
background: '#212126',
surface: '#000',
primary: '#fd8118',
// more colors
},
};
const vuetify = createVuetify({
theme: {
themes: {
myTheme,
},
},
components,
directives,
});
createApp(App).use(router).use(store).use(vuetify).mount('#app');
However I'm able to apply my primary color to a button, so the theme should be set up correctly:
<v-btn theme="myTheme" color="primary">This button has the correct color</v-btn>
Also I can change the switch's color to be a default one:
// this works
<v-switch color="orange" inset></v-switch>
while you are creating the theme you are not setting it as the default theme as shown in the documentation here
below example should work for you
import { createApp } from 'vue'
import { createVuetify, ThemeDefinition } from 'vuetify'
const myTheme = {
dark: true,
colors: {
background: '#212126',
surface: '#000',
primary: '#fd8118',
// more colors
},
}
export default createVuetify({
theme: {
defaultTheme: 'myTheme',
themes: {
myCustomLightTheme,
}
}
})
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.
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.
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,
},
},
},
});
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