adjust scrollbar colors

netdata · Apr 22, 2024 · 3ec2501 · 3ec2501
1 parent fa939f0
commit 3ec2501
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
diff --git a/src/mixins/webkitVisibleScrollbar.js b/src/mixins/webkitVisibleScrollbar.js
@@ -10,19 +10,19 @@ export default css`
   }
   &::-webkit-scrollbar-track {
     border-radius: ${getSizeBy(0.5)};
-    background-color: ${getRgbColor("border", 0.1)};
+    background-color: ${getRgbColor("scrollbarTrack", 1)};
   }
   &::-webkit-scrollbar-thumb {
     border-radius: ${getSizeBy(1)};
-    background-color: ${getRgbColor("border", 0.3)};
+    background-color: ${getRgbColor("scrollbarThumb", 0.8)};
   }
   &::-webkit-scrollbar-thumb:hover {
-    background-color: ${getRgbColor("border", 0.5)};
+    background-color: ${getRgbColor("scrollbarThumb", 1)};
   }
   &::-webkit-scrollbar-track-piece {
-    background-color: ${getRgbColor("border", 0.3)};
+    background-color: ${getRgbColor("scrollbarTrack", 0.3)};
   }
   &::-webkit-scrollbar-corner {
-    background-color: ${getRgbColor("border", 0.3)};
+    background-color: ${getRgbColor("scrollbarTrack", 0.3)};
   }
 `
diff --git a/src/theme/dark/colors.js b/src/theme/dark/colors.js
@@ -20,6 +20,8 @@ const appColors = {
   modalInfoBackground: rawColors.neutral.grey50,
   menuItemSelected: rawColors.green.green30,
   menuItemHover: rawColors.green.green10,
+  scrollbarThumb: rawColors.neutral.grey80,
+  scrollbarTrack: rawColors.neutral.grey35,
   //links
   link: rawColors.green.green110,
   linkHover: rawColors.green.green120,

diff --git a/src/theme/default/colors.js b/src/theme/default/colors.js
@@ -20,6 +20,9 @@ const appColors = {
   modalInfoBackground: rawColors.neutral.blackhaze,
   menuItemSelected: rawColors.green.green196,
   menuItemHover: rawColors.green.green190,
+  scrollbarThumb: rawColors.neutral.grey160,
+  scrollbarTrack: rawColors.neutral.grey190,
+
   //links
   link: rawColors.green.green100,
   linkHover: rawColors.green.green110,