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.
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,
}
}
})
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"
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.
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
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