diff --git a/apps/theming/css/theming.scss b/apps/theming/css/theming.scss
index 4d63674e35e445b416cde3be23bfbcf3802b356e..f21f00f438a1f3d757c18fd32742f8c2210a58bd 100644
--- a/apps/theming/css/theming.scss
+++ b/apps/theming/css/theming.scss
@@ -31,6 +31,9 @@ $invert: luma($color-primary) > 0.6;
 }
 
 @if ($invert) {
+	// too bright, use dark text to mix the primary
+	$color-primary-light: mix($color-primary, $color-main-text, 10%);
+
 	#appmenu:not(.inverted) svg {
 		filter: invert(1);
 	}
diff --git a/core/css/css-variables.scss b/core/css/css-variables.scss
index 9db5337468e37038a10d371ddaae8ff528f85bc4..e369874dec7cd4f6ac94a11847a24a58e91ea11c 100644
--- a/core/css/css-variables.scss
+++ b/core/css/css-variables.scss
@@ -11,6 +11,7 @@
 	--color-background-darker: $color-background-darker;
 
 	--color-primary: $color-primary;
+	--color-primary-light: $color-primary-light;
 	--color-primary-text: $color-primary-text;
 	--color-primary-text-dark: $color-primary-text-dark;
 	--color-primary-element: $color-primary-element;
diff --git a/core/css/variables.scss b/core/css/variables.scss
index 8a13121ba7dc65a0ab779542e235bc342660e1d7..114cbd833701f7f5eff84aece87c4515e50fa057 100644
--- a/core/css/variables.scss
+++ b/core/css/variables.scss
@@ -40,6 +40,7 @@ $color-background-dark: nc-darken($color-main-background, 7%) !default;
 $color-background-darker: nc-darken($color-main-background, 14%) !default;
 
 $color-primary: #0082c9 !default;
+$color-primary-light: mix($color-primary, $color-main-background, 10%) !default;
 $color-primary-text: #ffffff !default;
 // do not use nc-darken/lighten in case of overriding because
 // primary-text is independent of color-main-text