adjust scrollbar colors

Author: Panos Christophides

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)};
   }
 `

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,

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,