fix(css): re-use old --color-scrollbar variable

Signed-off-by: protoclown <ornano@felinn.org>

6 files changed, 3 insertions, 7 deletions

diff --git a/apps/theming/css/default.css b/apps/theming/css/default.css
index 11041c5c4c7..5c0b3ec337c 100644
--- a/apps/theming/css/default.css
+++ b/apps/theming/css/default.css
@@ -22,7 +22,6 @@
   --color-text-light: var(--color-main-text);
   /** @deprecated use `--color-text-maxcontrast` instead */
   --color-text-lighter: var(--color-text-maxcontrast);
-  --color-scrollbar: rgba(34,34,34, .15);
   --color-error: #DB0606;
   --color-error-rgb: 219,6,6;
   --color-error-hover: #df2525;
diff --git a/apps/theming/lib/Themes/DarkHighContrastTheme.php b/apps/theming/lib/Themes/DarkHighContrastTheme.php
index 64804d24e76..cff1f1f9a14 100644
--- a/apps/theming/lib/Themes/DarkHighContrastTheme.php
+++ b/apps/theming/lib/Themes/DarkHighContrastTheme.php
@@ -89,8 +89,6 @@ class DarkHighContrastTheme extends DarkTheme implements ITheme {
 				'--color-info-hover' => $this->util->lighten($colorInfo, 10),
 				'--color-info-text' => $this->util->lighten($colorInfo, 20),
 
-				'--color-scrollbar' => $this->util->lighten($colorMainBackground, 35),
-
 				// used for the icon loading animation
 				'--color-loading-light' => '#000000',
 				'--color-loading-dark' => '#dddddd',
diff --git a/apps/theming/lib/Themes/DarkTheme.php b/apps/theming/lib/Themes/DarkTheme.php
index ed8e7649c33..fd273d4697d 100644
--- a/apps/theming/lib/Themes/DarkTheme.php
+++ b/apps/theming/lib/Themes/DarkTheme.php
@@ -66,8 +66,6 @@ class DarkTheme extends DefaultTheme implements ITheme {
 				'--color-main-background-rgb' => $colorMainBackgroundRGB,
 				'--color-main-background-blur' => 'rgba(var(--color-main-background-rgb), .85)',
 
-				'--color-scrollbar' => $this->util->lighten($colorMainBackground, 15),
-
 				'--color-background-hover' => $this->util->lighten($colorMainBackground, 4),
 				'--color-background-dark' => $this->util->lighten($colorMainBackground, 7),
 				'--color-background-darker' => $this->util->lighten($colorMainBackground, 14),
diff --git a/apps/theming/lib/Themes/DefaultTheme.php b/apps/theming/lib/Themes/DefaultTheme.php
index 7aa0096123b..1a301eb9820 100644
--- a/apps/theming/lib/Themes/DefaultTheme.php
+++ b/apps/theming/lib/Themes/DefaultTheme.php
@@ -126,7 +126,7 @@ class DefaultTheme implements ITheme {
 			'--color-text-light' => 'var(--color-main-text)', // deprecated
 			'--color-text-lighter' => 'var(--color-text-maxcontrast)', // deprecated
 
-			'--color-scrollbar' => 'rgba(' . $colorMainTextRgb . ', .15)',
+			'--color-scrollbar' => 'var(--color-border-maxcontrast) transparent',
 
 			// error/warning/success/info feedback colours
 			'--color-error' => $colorError,
diff --git a/apps/theming/lib/Themes/HighContrastTheme.php b/apps/theming/lib/Themes/HighContrastTheme.php
index 6f33c0bbcd9..3eee51630ba 100644
--- a/apps/theming/lib/Themes/HighContrastTheme.php
+++ b/apps/theming/lib/Themes/HighContrastTheme.php
@@ -94,7 +94,7 @@ class HighContrastTheme extends DefaultTheme implements ITheme {
 
 				'--color-favorite' => '#936B06',
 
-				'--color-scrollbar' => $this->util->darken($colorMainBackground, 25),
+				'--color-scrollbar' => 'auto',
 
 				// used for the icon loading animation
 				'--color-loading-light' => '#dddddd',
diff --git a/core/css/styles.scss b/core/css/styles.scss
index b8a5e7c5004..de30a8badce 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -20,6 +20,7 @@ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pr
 	font-family: inherit;
 	vertical-align: baseline;
 	cursor: default;
+	scrollbar-color: var(--color-scrollbar);
 }
 
 .js-focus-visible :focus:not(.focus-visible) {