diff --git a/.changeset/loud-wasps-pay.md b/.changeset/loud-wasps-pay.md
new file mode 100644
index 000000000000..60411aa01323
--- /dev/null
+++ b/.changeset/loud-wasps-pay.md
@@ -0,0 +1,5 @@
+---
+"astro": patch
+---
+
+Improves the color contrast for notification badges on dev toolbar apps
diff --git a/packages/astro/src/runtime/client/dev-toolbar/entrypoint.ts b/packages/astro/src/runtime/client/dev-toolbar/entrypoint.ts
index f115decf0676..bb69254385f0 100644
--- a/packages/astro/src/runtime/client/dev-toolbar/entrypoint.ts
+++ b/packages/astro/src/runtime/client/dev-toolbar/entrypoint.ts
@@ -65,10 +65,10 @@ document.addEventListener('DOMContentLoaded', async () => {
const notificationLevels = ['error', 'warning', 'info'] as const;
const notificationSVGs: Record<(typeof notificationLevels)[number], string> = {
error:
- '',
+ '',
warning:
- '',
- info: '',
+ '',
+ info: '',
} as const;
const prepareApp = (appDefinition: DevToolbarAppDefinition, builtIn: boolean): DevToolbarApp => {
diff --git a/packages/astro/src/runtime/client/dev-toolbar/toolbar.ts b/packages/astro/src/runtime/client/dev-toolbar/toolbar.ts
index 33142b8f61cd..cc14d7c53566 100644
--- a/packages/astro/src/runtime/client/dev-toolbar/toolbar.ts
+++ b/packages/astro/src/runtime/client/dev-toolbar/toolbar.ts
@@ -189,8 +189,14 @@ export class AstroDevToolbar extends HTMLElement {
}
}
+ #dev-bar #bar-container .item:hover .notification rect, #dev-bar #bar-container .item:hover .notification path {
+ stroke: #38393D;
+ --fill: var(--fill-hover);
+ }
+
#dev-bar #bar-container .item.active .notification rect, #dev-bar #bar-container .item.active .notification path {
- stroke: rgba(71, 78, 94, 1);
+ stroke: #454C5C;
+ --fill: var(--fill-hover);
}
#dev-bar .item .icon {