diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts
index 560049b494..5a8978059c 100644
--- a/styles/src/styleTree/workspace.ts
+++ b/styles/src/styleTree/workspace.ts
@@ -155,7 +155,7 @@ export default function workspace(theme: Theme) {
       padding: { left: 6 },
     },
     disconnectedOverlay: {
-      ...text(theme, "sans", "active"),
+      ...text(theme, "sans", "onMedia"),
       background: "#000000aa",
     },
     notification: {
diff --git a/styles/src/themes/common/base16.ts b/styles/src/themes/common/base16.ts
index a05b3b2e71..9f376a3b0b 100644
--- a/styles/src/themes/common/base16.ts
+++ b/styles/src/themes/common/base16.ts
@@ -107,6 +107,7 @@ export function createTheme(
     error: rampColor(ramps.red, 0.5),
     warning: rampColor(ramps.yellow, 0.5),
     info: rampColor(ramps.blue, 0.5),
+    onMedia: rampColor(ramps.neutral, isLight ? 0 : 7),
   };
 
   const player = {
diff --git a/styles/src/themes/common/theme.ts b/styles/src/themes/common/theme.ts
index d6a3149e31..5f32844cc7 100644
--- a/styles/src/themes/common/theme.ts
+++ b/styles/src/themes/common/theme.ts
@@ -105,6 +105,7 @@ export default interface Theme {
     error: ColorToken;
     warning: ColorToken;
     info: ColorToken;
+    onMedia: ColorToken;
   };
   iconColor: {
     primary: ColorToken;