Let the color prop work on snackbars

[ajslater]

The bug

session-error-snackbar.vue (color="error") and filter-warning-snackbar.vue (color="warning") both rendered on the app background instead of their color.

.v-snackbar__wrapper is a .v-overlay__content, and app.vue painted all of those the theme background with !important from outside any cascade layer:

.v-overlay__content {
  background-color: rgb(var(--v-theme-background)) !important;
  border-radius: 5px;
}

Vuetify's bg-error / bg-warning utilities live inside @layer vuetify-utilities.theme-background, so they never stood a chance. An unlayered declaration outranks a layered one regardless of specificity, so no amount of specificity from the snackbar's end could win.

Worth noting: Vuetify's own .v-snackbar--variant-elevated rule is not part of the problem on 4.2.1. It sits in @layer vuetify-components, which the bg-* layer already beats. Deleting only the app.vue rule in a live page turned the error snackbar crimson, so the global rule was the sole cause.

The fix

Split the rule in app.vue. The radius still applies to every overlay; the background now skips snackbar wrappers.

.v-overlay__content {
  border-radius: 5px;
}

.v-overlay__content:not(.v-snackbar__wrapper) {
  background-color: rgb(var(--v-theme-background)) !important;
}

VSnackbar also gets a default of color: "background" in the Vuetify plugin. Without one, an uncolored snackbar would now fall back to Vuetify's Material inverse surface, a light bar in this dark theme with unreadable dark-on-dark text. The default preserves today's look, and an explicit color prop still wins.

docker-hub-deprecated-snackbar.vue no longer needs its local two-class !important override, so that and the marker class it existed for are gone.

Verification

Dev server, Vuetify 4.2.1, computed styles on the live elements:

Element	Background	Text
session-error (error)	rgb(220, 20, 60)	rgb(255, 255, 255)
filter-warning (warning)	rgb(230, 189, 13)	rgb(0, 0, 0)
docker-hub (warning, no local override)	rgb(230, 189, 13)	rgb(0, 0, 0)
snackbar with no color	rgb(18, 18, 18)	rgb(255, 255, 255)

Unchanged, matching the pre-change baseline:

Element	Background	Radius
menu content	rgb(18, 18, 18)	5px
dialog content	rgb(18, 18, 18)	5px
tooltip content	rgb(18, 18, 18), text rgb(128, 128, 128)	5px

The production bundle was checked too: it keeps the layer order (vuetify-core → vuetify-components → vuetify-overrides → vuetify-utilities → vuetify-final) and leaves the app rules unlayered, so the cascade behaves the same as in dev.

make fix produced no changes, make lint exits 0, and bunx vitest run passes 53 files / 500 tests.

🤖 Generated with Claude Code