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 <[email protected]>
withastro · Nov 29, 2023 · f4401c8 · f4401c8
1 parent 279e3c1
commit f4401c8
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 1 deletion.
diff --git a/.changeset/grumpy-seas-switch.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;