I am trying to use some conditional logic to change the background color of a button. I have found posts on here that show you can in fact use the ternary operator to change the color prop but I have not found an example for users who liike to use the color variables defined in the theme options. If it is not possible is there a way to use the root defined variable color options?
<v-btn class="mx-2"
fab
dark
color="{toggleEdit ? primary : secondary}"
@@click.stop="toggleEdit = !toggleEdit">
<v-icon v-if="toggleEdit" dark>mdi-pencil</v-icon>
<v-icon v-else dark>mdi-check</v-icon>
</v-btn>
and
<v-btn class="mx-2"
fab
dark
color="{toggleEdit ? 'var(--primary)' : 'var(--secondary)'}"
@@click.stop="toggleEdit = !toggleEdit">
<v-icon v-if="toggleEdit" dark>mdi-pencil</v-icon>
<v-icon v-else dark>mdi-check</v-icon>
</v-btn>
You should be using :color="{toggleEdit ? primary : secondary}", otherwise it will not be processed and passed as is.
And as per the docs here: https://vuetifyjs.com/en/api/v-btn/#props, the color props should be a string rather than an object, so I believe it should actually be:
:color="toggleEdit ? primary : secondary"
Hoping primary and secondary are available in local context, with color values as strings.
Okay if primary or secondary variables are not available in the local context (as properties in data of the wrapping component), you can access your default theme colors with:
:color="toggleEdit ? $vuetify.theme.themes.light.primary :
this.$vuetify.theme.themes.light.secondary"
Where you can interchange light with dark as per your configuration.
If you need to set CSS variables then the property customProperties must be enabled in your theme configuration (check the reference links below to know how). After that you can access your color variables as given below:
:color="toggleEdit ? 'var(--v-primary-base)' : 'var(--v-secondary-base)'"
References: https://vuetifyjs.com/en/features/theme/#customizing https://vuetifyjs.com/en/features/theme/#custom-properties
You need to use below code instead:
<v-btn class="mx-2"
fab
dark
:color="toggleEdit ? 'var(--primary)': 'var(--secondary)'"
@@click.stop="toggleEdit = !toggleEdit">
<v-icon v-if="toggleEdit" dark>mdi-pencil</v-icon>
<v-icon v-else dark>mdi-check</v-icon>
</v-btn>
Check following snippet pls:
* {
--primary: goldenrod;
--secondary: seagreen;
}<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app>
<v-main>
<v-container>
<v-btn class="mx-2"
fab
dark
:color="toggleEdit ? 'var(--primary)': 'var(--secondary)'"
@click.stop="toggleEdit = !toggleEdit">
<v-icon v-if="toggleEdit" dark>mdi-pencil</v-icon>
<v-icon v-else dark>mdi-check</v-icon>
</v-btn>
</v-container>
</v-main>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
toggleEdit: false
}
}
})
</script>
</body>
</html>