Since upgrading Vuetify from version 1.1.9 to 1.2.3, I have encountered a strange issue where all of my dividers appear much darker than before and different from the examples in the documentation.
This is how it should look:
https://i.sstatic.net/GnxzV.png
However, this is what mine currently looks like (you can see the noticeable difference):
https://i.sstatic.net/zLUul.png
Upon inspection, the color value for the class appears to be correct:
.theme--light.v-divider {
border-color: rgba(0,0,0,0.12);
}
But something seems to be overriding the background color with the same darker shade:
.application .theme--light.v-navigation-drawer .v-divider, .application .theme--light.v-navigation-drawer:not(.v-navigation-drawer--floating) .v-navigation-drawer__border, .theme--light .v-navigation-drawer .v-divider, .theme--light .v-navigation-drawer:not(.v-navigation-drawer--floating) .v-navigation-drawer__border{background-color: rgba(0,0,0,.12));}
When disabling both overrides in Chrome's developer tools, the dividers show the correct color.
The question remains, why is this happening and how can I resolve it? Any assistance would be greatly appreciated.
Edit: After rolling back to the previous version to test, it seems that the issue is not related to the update.