Improve high contrast mode with the dev overlay (#9218)

* Improve high contrast mode with the dev overlay

* Update packages/astro/src/runtime/client/dev-overlay/overlay.ts

---------

Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>

6 files changed, 57 insertions, 1 deletions

diff --git a/.changeset/grumpy-seas-switch.md b/.changeset/grumpy-seas-switch.md
new file mode 100644
index 000000000..85cf0e22f
--- /dev/null
+++ b/.changeset/grumpy-seas-switch.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Improve high contrast mode with the Dev Overlay
diff --git a/packages/astro/src/runtime/client/dev-overlay/overlay.ts b/packages/astro/src/runtime/client/dev-overlay/overlay.ts
index 0e89ae3e9..648bbd325 100644
--- a/packages/astro/src/runtime/client/dev-overlay/overlay.ts
+++ b/packages/astro/src/runtime/client/dev-overlay/overlay.ts
@@ -83,6 +83,12 @@ export class AstroDevOverlay extends HTMLElement {
 				box-shadow: 0px 0px 0px 0px rgba(19, 21, 26, 0.30), 0px 1px 2px 0px rgba(19, 21, 26, 0.29), 0px 4px 4px 0px rgba(19, 21, 26, 0.26), 0px 10px 6px 0px rgba(19, 21, 26, 0.15), 0px 17px 7px 0px rgba(19, 21, 26, 0.04), 0px 26px 7px 0px rgba(19, 21, 26, 0.01);
 			}
 
+			@media (forced-colors: active) {
+				#dev-bar {
+					background: white;
+				}
+			}
+
 			#dev-bar .item {
 				display: flex;
 				justify-content: center;
@@ -132,6 +138,7 @@ export class AstroDevOverlay extends HTMLElement {
 				pointer-events: none;
 			}
 
+
 			#dev-bar .item-tooltip::after{
 				content: '';
 				position: absolute;
@@ -147,6 +154,12 @@ export class AstroDevOverlay extends HTMLElement {
 				opacity: 1;
 			}
 
+			@media (forced-colors: active) {
+				#dev-bar .item:hover .item-tooltip, #dev-bar .item:not(.active):focus-visible .item-tooltip {
+					background: white;
+				}
+			}
+
 			#dev-bar #bar-container .item.active .notification {
 				border-color: rgba(71, 78, 94, 1);
 			}
@@ -165,6 +178,12 @@ export class AstroDevOverlay extends HTMLElement {
 				margin: auto;
 			}
 
+			@media (forced-colors: active) {
+				#dev-bar .item svg path[fill="#fff"] {
+					fill: black;
+				}
+			}
+
 			#dev-bar .item .notification {
 				display: none;
 				position: absolute;
diff --git a/packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts b/packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts
index 53fbc6502..6707459f4 100644
--- a/packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts
+++ b/packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts
@@ -315,6 +315,12 @@ export default {
 				#integration-list astro-dev-overlay-card p {
 					font-size: 14px;
 				}
+
+				@media (forced-colors: active) {
+					svg path[fill="#fff"] {
+						fill: black;
+					}
+				}
 			</style>
 
 			<header>
diff --git a/packages/astro/src/runtime/client/dev-overlay/ui-library/icon.ts b/packages/astro/src/runtime/client/dev-overlay/ui-library/icon.ts
index 65ef7c270..34cf3150d 100644
--- a/packages/astro/src/runtime/client/dev-overlay/ui-library/icon.ts
+++ b/packages/astro/src/runtime/client/dev-overlay/ui-library/icon.ts
@@ -34,7 +34,19 @@ export class DevOverlayIcon extends HTMLElement {
 	}
 
 	buildTemplate() {
-		this.shadowRoot.innerHTML = `<style>svg { width: 100%; height: 100%;}</style>\n${this.getIconHTML(
+		this.shadowRoot.innerHTML = `
+			<style>
+				svg {
+					width: 100%;
+					height: 100%;
+				}
+
+				@media (forced-colors: active) {
+					svg path[fill="#fff"] {
+						fill: black;
+					}
+				}
+			</style>\n${this.getIconHTML(
 			this._icon
 		)}`;
 	}
diff --git a/packages/astro/src/runtime/client/dev-overlay/ui-library/toggle.ts b/packages/astro/src/runtime/client/dev-overlay/ui-library/toggle.ts
index 63dcba65e..1fb0b686a 100644
--- a/packages/astro/src/runtime/client/dev-overlay/ui-library/toggle.ts
+++ b/packages/astro/src/runtime/client/dev-overlay/ui-library/toggle.ts
@@ -30,6 +30,14 @@ export class DevOverlayToggle extends HTMLElement {
 				position: relative;
 			}
 
+			@media (forced-colors: active) {
+				input::after {
+					border: 1px solid black;
+					top: 0px;
+					left: 0px;
+				}
+			}
+
 			input:checked {
 				border: 1px solid rgba(213, 249, 196, 1);
 				background-color: rgba(61, 125, 31, 1);
diff --git a/packages/astro/src/runtime/client/dev-overlay/ui-library/window.ts b/packages/astro/src/runtime/client/dev-overlay/ui-library/window.ts
index 2f5357a50..00a4ace86 100644
--- a/packages/astro/src/runtime/client/dev-overlay/ui-library/window.ts
+++ b/packages/astro/src/runtime/client/dev-overlay/ui-library/window.ts
@@ -30,6 +30,12 @@ export class DevOverlayWindow extends HTMLElement {
 					box-shadow: 0px 0px 0px 0px rgba(19, 21, 26, 0.30), 0px 1px 2px 0px rgba(19, 21, 26, 0.29), 0px 4px 4px 0px rgba(19, 21, 26, 0.26), 0px 10px 6px 0px rgba(19, 21, 26, 0.15), 0px 17px 7px 0px rgba(19, 21, 26, 0.04), 0px 26px 7px 0px rgba(19, 21, 26, 0.01);
 				}
 
+				@media (forced-colors: active) {
+					:host {
+						background: white;
+					}
+				}
+
 				::slotted(h1), ::slotted(h2), ::slotted(h3), ::slotted(h4), ::slotted(h5) {
 					font-weight: 600;
 					color: #fff;