diff --git a/adev/src/content/examples/aria/multiselect/src/basic/retro/app/app.css b/adev/src/content/examples/aria/multiselect/src/basic/retro/app/app.css
index fdc98a62054..bbfe9182b07 100644
--- a/adev/src/content/examples/aria/multiselect/src/basic/retro/app/app.css
+++ b/adev/src/content/examples/aria/multiselect/src/basic/retro/app/app.css
@@ -8,6 +8,7 @@
 
   font-family: 'Press Start 2P';
   --retro-button-color: color-mix(in srgb, var(--hot-pink) 80%, var(--page-background));
+  --retro-pressed-tint: #fbfbfb;
   --retro-shadow-light: color-mix(in srgb, var(--retro-button-color) 90%, #fff);
   --retro-shadow-dark: color-mix(in srgb, var(--retro-button-color) 90%, #000);
   --retro-elevated-shadow:
@@ -30,6 +31,10 @@
     0px -4px 0px 0px var(--tertiary-contrast), 0px 0px 0px 0px var(--tertiary-contrast);
 }
 
+:host-context(.docs-dark-mode) {
+  --retro-pressed-tint: #151417;
+}
+
 .select {
   display: flex;
   position: relative;
@@ -62,7 +67,7 @@
 .select:active {
   transform: translate(4px, 4px);
   box-shadow: var(--retro-pressed-shadow);
-  background-color: color-mix(in srgb, var(--retro-button-color) 60%, var(--gray-50));
+  background-color: color-mix(in srgb, var(--retro-button-color) 60%, var(--retro-pressed-tint));
 }
 
 .select[aria-disabled='true'] {
diff --git a/adev/src/content/examples/aria/multiselect/src/icons/retro/app/app.css b/adev/src/content/examples/aria/multiselect/src/icons/retro/app/app.css
index fdc98a62054..bbfe9182b07 100644
--- a/adev/src/content/examples/aria/multiselect/src/icons/retro/app/app.css
+++ b/adev/src/content/examples/aria/multiselect/src/icons/retro/app/app.css
@@ -8,6 +8,7 @@
 
   font-family: 'Press Start 2P';
   --retro-button-color: color-mix(in srgb, var(--hot-pink) 80%, var(--page-background));
+  --retro-pressed-tint: #fbfbfb;
   --retro-shadow-light: color-mix(in srgb, var(--retro-button-color) 90%, #fff);
   --retro-shadow-dark: color-mix(in srgb, var(--retro-button-color) 90%, #000);
   --retro-elevated-shadow:
@@ -30,6 +31,10 @@
     0px -4px 0px 0px var(--tertiary-contrast), 0px 0px 0px 0px var(--tertiary-contrast);
 }
 
+:host-context(.docs-dark-mode) {
+  --retro-pressed-tint: #151417;
+}
+
 .select {
   display: flex;
   position: relative;
@@ -62,7 +67,7 @@
 .select:active {
   transform: translate(4px, 4px);
   box-shadow: var(--retro-pressed-shadow);
-  background-color: color-mix(in srgb, var(--retro-button-color) 60%, var(--gray-50));
+  background-color: color-mix(in srgb, var(--retro-button-color) 60%, var(--retro-pressed-tint));
 }
 
 .select[aria-disabled='true'] {
diff --git a/adev/src/content/examples/aria/multiselect/src/limited/retro/app/app.css b/adev/src/content/examples/aria/multiselect/src/limited/retro/app/app.css
index 4ef693b0eb2..c52744bc038 100644
--- a/adev/src/content/examples/aria/multiselect/src/limited/retro/app/app.css
+++ b/adev/src/content/examples/aria/multiselect/src/limited/retro/app/app.css
@@ -8,6 +8,7 @@
 
   font-family: 'Press Start 2P';
   --retro-button-color: color-mix(in srgb, var(--hot-pink) 80%, var(--page-background));
+  --retro-pressed-tint: #fbfbfb;
   --retro-shadow-light: color-mix(in srgb, var(--retro-button-color) 90%, #fff);
   --retro-shadow-dark: color-mix(in srgb, var(--retro-button-color) 90%, #000);
   --retro-elevated-shadow:
@@ -30,6 +31,10 @@
     0px -4px 0px 0px var(--tertiary-contrast), 0px 0px 0px 0px var(--tertiary-contrast);
 }
 
+:host-context(.docs-dark-mode) {
+  --retro-pressed-tint: #151417;
+}
+
 .select {
   display: flex;
   position: relative;
@@ -62,7 +67,7 @@
 .select:active {
   transform: translate(4px, 4px);
   box-shadow: var(--retro-pressed-shadow);
-  background-color: color-mix(in srgb, var(--retro-button-color) 60%, var(--gray-50));
+  background-color: color-mix(in srgb, var(--retro-button-color) 60%, var(--retro-pressed-tint));
 }
 
 .select[aria-disabled='true'] {
diff --git a/adev/src/content/examples/aria/select/src/basic/retro/app/app.css b/adev/src/content/examples/aria/select/src/basic/retro/app/app.css
index 9f226fe1e8e..03167f0a34a 100644
--- a/adev/src/content/examples/aria/select/src/basic/retro/app/app.css
+++ b/adev/src/content/examples/aria/select/src/basic/retro/app/app.css
@@ -8,6 +8,7 @@
 
   font-family: 'Press Start 2P';
   --retro-button-color: color-mix(in srgb, var(--hot-pink) 80%, var(--page-background));
+  --retro-pressed-tint: #fbfbfb;
   --retro-shadow-light: color-mix(in srgb, var(--retro-button-color) 90%, #fff);
   --retro-shadow-dark: color-mix(in srgb, var(--retro-button-color) 90%, #000);
   --retro-elevated-shadow:
@@ -30,6 +31,10 @@
     0px -4px 0px 0px var(--tertiary-contrast), 0px 0px 0px 0px var(--tertiary-contrast);
 }
 
+:host-context(.docs-dark-mode) {
+  --retro-pressed-tint: #151417;
+}
+
 .select,
 [ngListbox],
 [ngOption] {
@@ -66,7 +71,7 @@
 .select:active {
   transform: translate(4px, 4px);
   box-shadow: var(--retro-pressed-shadow);
-  background-color: color-mix(in srgb, var(--retro-button-color) 60%, var(--gray-50));
+  background-color: color-mix(in srgb, var(--retro-button-color) 60%, var(--retro-pressed-tint));
 }
 
 .select[aria-disabled='true'] {
diff --git a/adev/src/content/examples/aria/select/src/disabled/retro/app/app.css b/adev/src/content/examples/aria/select/src/disabled/retro/app/app.css
index f45281fa9f6..e162fc2ca28 100644
--- a/adev/src/content/examples/aria/select/src/disabled/retro/app/app.css
+++ b/adev/src/content/examples/aria/select/src/disabled/retro/app/app.css
@@ -8,6 +8,7 @@
 
   font-family: 'Press Start 2P';
   --retro-button-color: color-mix(in srgb, var(--hot-pink) 80%, var(--page-background));
+  --retro-pressed-tint: #fbfbfb;
   --retro-shadow-light: color-mix(in srgb, var(--retro-button-color) 90%, #fff);
   --retro-shadow-dark: color-mix(in srgb, var(--retro-button-color) 90%, #000);
   --retro-elevated-shadow:
@@ -30,6 +31,10 @@
     0px -4px 0px 0px var(--tertiary-contrast), 0px 0px 0px 0px var(--tertiary-contrast);
 }
 
+:host-context(.docs-dark-mode) {
+  --retro-pressed-tint: #151417;
+}
+
 .select,
 [ngListbox],
 [ngOption] {
@@ -66,7 +71,7 @@
 .select:not([aria-disabled='true']):active {
   transform: translate(4px, 4px);
   box-shadow: var(--retro-pressed-shadow);
-  background-color: color-mix(in srgb, var(--retro-button-color) 60%, var(--gray-50));
+  background-color: color-mix(in srgb, var(--retro-button-color) 60%, var(--retro-pressed-tint));
 }
 
 .select[aria-disabled='true'] {
diff --git a/adev/src/content/examples/aria/select/src/icons/retro/app/app.css b/adev/src/content/examples/aria/select/src/icons/retro/app/app.css
index 9f226fe1e8e..03167f0a34a 100644
--- a/adev/src/content/examples/aria/select/src/icons/retro/app/app.css
+++ b/adev/src/content/examples/aria/select/src/icons/retro/app/app.css
@@ -8,6 +8,7 @@
 
   font-family: 'Press Start 2P';
   --retro-button-color: color-mix(in srgb, var(--hot-pink) 80%, var(--page-background));
+  --retro-pressed-tint: #fbfbfb;
   --retro-shadow-light: color-mix(in srgb, var(--retro-button-color) 90%, #fff);
   --retro-shadow-dark: color-mix(in srgb, var(--retro-button-color) 90%, #000);
   --retro-elevated-shadow:
@@ -30,6 +31,10 @@
     0px -4px 0px 0px var(--tertiary-contrast), 0px 0px 0px 0px var(--tertiary-contrast);
 }
 
+:host-context(.docs-dark-mode) {
+  --retro-pressed-tint: #151417;
+}
+
 .select,
 [ngListbox],
 [ngOption] {
@@ -66,7 +71,7 @@
 .select:active {
   transform: translate(4px, 4px);
   box-shadow: var(--retro-pressed-shadow);
-  background-color: color-mix(in srgb, var(--retro-button-color) 60%, var(--gray-50));
+  background-color: color-mix(in srgb, var(--retro-button-color) 60%, var(--retro-pressed-tint));
 }
 
 .select[aria-disabled='true'] {
diff --git a/adev/src/content/examples/aria/toolbar/src/basic/retro/app/app.css b/adev/src/content/examples/aria/toolbar/src/basic/retro/app/app.css
index a7e3b3569bb..bfbde903f0a 100644
--- a/adev/src/content/examples/aria/toolbar/src/basic/retro/app/app.css
+++ b/adev/src/content/examples/aria/toolbar/src/basic/retro/app/app.css
@@ -6,6 +6,7 @@
 
   font-family: 'Press Start 2P';
   --retro-button-color: color-mix(in srgb, var(--vivid-pink) 80%, var(--page-background));
+  --retro-pressed-tint: #fbfbfb;
   --retro-shadow-light: color-mix(in srgb, var(--retro-button-color) 90%, #fff);
   --retro-shadow-dark: color-mix(in srgb, var(--retro-button-color) 90%, #000);
   --retro-elevated-shadow:
@@ -28,6 +29,10 @@
     0px -4px 0px 0px var(--tertiary-contrast), 0px 0px 0px 0px var(--tertiary-contrast);
 }
 
+:host-context(.docs-dark-mode) {
+  --retro-pressed-tint: #151417;
+}
+
 [ngToolbar] {
   gap: 1.5rem;
   display: flex;
@@ -71,7 +76,7 @@
 [ngToolbarWidget][aria-checked='true'] {
   transform: translate(4px, 4px);
   box-shadow: var(--retro-pressed-shadow);
-  background-color: color-mix(in srgb, var(--retro-button-color) 60%, var(--gray-50));
+  background-color: color-mix(in srgb, var(--retro-button-color) 60%, var(--retro-pressed-tint));
 }
 
 [ngToolbarWidget]:focus {
diff --git a/adev/src/content/examples/aria/toolbar/src/disabled/retro/app/app.css b/adev/src/content/examples/aria/toolbar/src/disabled/retro/app/app.css
index 42e2e280e1a..787e3fab54d 100644
--- a/adev/src/content/examples/aria/toolbar/src/disabled/retro/app/app.css
+++ b/adev/src/content/examples/aria/toolbar/src/disabled/retro/app/app.css
@@ -6,6 +6,7 @@
 
   font-family: 'Press Start 2P';
   --retro-button-color: color-mix(in srgb, var(--vivid-pink) 80%, var(--page-background));
+  --retro-pressed-tint: #fbfbfb;
   --retro-shadow-light: color-mix(in srgb, var(--retro-button-color) 90%, #fff);
   --retro-shadow-dark: color-mix(in srgb, var(--retro-button-color) 90%, #000);
   --retro-elevated-shadow:
@@ -28,6 +29,10 @@
     0px -4px 0px 0px var(--tertiary-contrast), 0px 0px 0px 0px var(--tertiary-contrast);
 }
 
+:host-context(.docs-dark-mode) {
+  --retro-pressed-tint: #151417;
+}
+
 [ngToolbar] {
   gap: 1.5rem;
   display: flex;
@@ -71,7 +76,7 @@
 [ngToolbarWidget][aria-checked='true'] {
   transform: translate(4px, 4px);
   box-shadow: var(--retro-pressed-shadow);
-  background-color: color-mix(in srgb, var(--retro-button-color) 60%, var(--gray-50));
+  background-color: color-mix(in srgb, var(--retro-button-color) 60%, var(--retro-pressed-tint));
 }
 
 [ngToolbarWidget]:focus {
diff --git a/adev/src/content/examples/aria/toolbar/src/rtl/retro/app/app.css b/adev/src/content/examples/aria/toolbar/src/rtl/retro/app/app.css
index a7e3b3569bb..bfbde903f0a 100644
--- a/adev/src/content/examples/aria/toolbar/src/rtl/retro/app/app.css
+++ b/adev/src/content/examples/aria/toolbar/src/rtl/retro/app/app.css
@@ -6,6 +6,7 @@
 
   font-family: 'Press Start 2P';
   --retro-button-color: color-mix(in srgb, var(--vivid-pink) 80%, var(--page-background));
+  --retro-pressed-tint: #fbfbfb;
   --retro-shadow-light: color-mix(in srgb, var(--retro-button-color) 90%, #fff);
   --retro-shadow-dark: color-mix(in srgb, var(--retro-button-color) 90%, #000);
   --retro-elevated-shadow:
@@ -28,6 +29,10 @@
     0px -4px 0px 0px var(--tertiary-contrast), 0px 0px 0px 0px var(--tertiary-contrast);
 }
 
+:host-context(.docs-dark-mode) {
+  --retro-pressed-tint: #151417;
+}
+
 [ngToolbar] {
   gap: 1.5rem;
   display: flex;
@@ -71,7 +76,7 @@
 [ngToolbarWidget][aria-checked='true'] {
   transform: translate(4px, 4px);
   box-shadow: var(--retro-pressed-shadow);
-  background-color: color-mix(in srgb, var(--retro-button-color) 60%, var(--gray-50));
+  background-color: color-mix(in srgb, var(--retro-button-color) 60%, var(--retro-pressed-tint));
 }
 
 [ngToolbarWidget]:focus {
diff --git a/adev/src/content/examples/aria/toolbar/src/vertical/retro/app/app.css b/adev/src/content/examples/aria/toolbar/src/vertical/retro/app/app.css
index 2fb268439f6..44f0a39cb9d 100644
--- a/adev/src/content/examples/aria/toolbar/src/vertical/retro/app/app.css
+++ b/adev/src/content/examples/aria/toolbar/src/vertical/retro/app/app.css
@@ -6,6 +6,7 @@
 
   font-family: 'Press Start 2P';
   --retro-button-color: color-mix(in srgb, var(--vivid-pink) 80%, var(--page-background));
+  --retro-pressed-tint: #fbfbfb;
   --retro-shadow-light: color-mix(in srgb, var(--retro-button-color) 90%, #fff);
   --retro-shadow-dark: color-mix(in srgb, var(--retro-button-color) 90%, #000);
   --retro-elevated-shadow:
@@ -28,6 +29,10 @@
     0px -4px 0px 0px var(--tertiary-contrast), 0px 0px 0px 0px var(--tertiary-contrast);
 }
 
+:host-context(.docs-dark-mode) {
+  --retro-pressed-tint: #151417;
+}
+
 [ngToolbar] {
   gap: 1.5rem;
   display: flex;
@@ -73,7 +78,7 @@
 [ngToolbarWidget][aria-checked='true'] {
   transform: translate(4px, 4px);
   box-shadow: var(--retro-pressed-shadow);
-  background-color: color-mix(in srgb, var(--retro-button-color) 60%, var(--gray-50));
+  background-color: color-mix(in srgb, var(--retro-button-color) 60%, var(--retro-pressed-tint));
 }
 
 [ngToolbarWidget]:focus {