diff --git a/apps/theming/css/default.css b/apps/theming/css/default.css
index da9ad6e97deea..ac7c67c8408cf 100644
--- a/apps/theming/css/default.css
+++ b/apps/theming/css/default.css
@@ -26,6 +26,9 @@
   --color-success: #46ba61;
   --color-success-rgb: 70,186,97;
   --color-success-hover: #6ac780;
+  --color-info: #006aa3;
+  --color-info-rgb: 0,106,163;
+  --color-info-hover: #3287b5;
   --color-loading-light: #cccccc;
   --color-loading-dark: #444444;
   --color-box-shadow-rgb: 77,77,77;
diff --git a/apps/theming/lib/Themes/DefaultTheme.php b/apps/theming/lib/Themes/DefaultTheme.php
index cb4ed51006842..0a4ac44afb682 100644
--- a/apps/theming/lib/Themes/DefaultTheme.php
+++ b/apps/theming/lib/Themes/DefaultTheme.php
@@ -147,6 +147,9 @@ public function getCSSVariables(): array {
 			'--color-success' => '#46ba61',
 			'--color-success-rgb' => join(',', $this->util->hexToRGB('#46ba61')),
 			'--color-success-hover' => $this->util->mix('#46ba61', $colorMainBackground, 60),
+			'--color-info' => '#006aa3',
+			'--color-info-rgb' => join(',', $this->util->hexToRGB('#006aa3')),
+			'--color-info-hover' => $this->util->mix('#006aa3', $colorMainBackground, 60),
 
 			// used for the icon loading animation
 			'--color-loading-light' => '#cccccc',