Vuetify Color Variant Attribute Inside Component Tag

user_8710822 0
Viewed 68

I'm trying to add color variant to the Navigation Drawer component as a HTML attribute. My custom primary color works, but I want to add primary-darken3 color variant. Navigation Drawer component looks like this:

<v-navigation-drawer absolute permanent color="primary" class="sidebar-container">
</v-navigation-drawer>

I'm able to add primary-darken3 color variant to the component by adding custom css style:

.sidebar-container {
    background-color: var(--v-primary-darken3) !important;
}

I wonder if is there a way to use this color variant by passing it somehow to the component's color attribute or as some other attribute?

material-design vuetify.js vue.js
1 Answers

Just add the class darken-3 to the navigation drawer component :

<v-navigation-drawer absolute permanent color="primary" class="darken-3">
</v-navigation-drawer>

you could do this with any component uses color prop

user_81728570
Related