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" >
</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?

CodePudding user response：

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

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

you could do this with any component uses color prop