diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts
index 560049b4947d6eddff6f54815112f4615de480a1..5a8978059c1929dabd4d8d72714c85f6785eee87 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 a05b3b2e71eaa6017973a2a8e715595ee1590362..9f376a3b0b6af84db0516cb361c335a7536a8e0c 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 d6a3149e312601b9cfa295fe69d5e34f219d4369..5f32844cc7114a075318f964242dc3720512a1af 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;