[Web] Re-add custom scrollbar css

Because the default one is too ugly on linux/windows, specially using a dark theme
devhubapp · Mar 6, 2019 · b8ff50d · b8ff50d
1 parent 3565ea8
commit b8ff50d
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 1 deletion.
diff --git a/packages/components/src/components/AppGlobalStyles.web.tsx b/packages/components/src/components/AppGlobalStyles.web.tsx
@@ -1,14 +1,26 @@
 import React from 'react'
 
 import { Theme } from '@devhub/core'
-import { darken, lighten } from 'polished'
+import { darken, getLuminance, lighten } from 'polished'
 import { themeColorFields } from '../utils/helpers/theme'
+import { getSeparatorThemeColor } from './common/Separator'
 import { useTheme } from './context/ThemeContext'
 
 function getStyles(params: { theme: Theme }) {
   const t = params.theme
+  const separatorColor = t[getSeparatorThemeColor(t.backgroundColor)]
+  const separatorColorLuminance = getLuminance(separatorColor)
+  const backgroundColorLuminance = getLuminance(t.backgroundColor)
 
   return `
+    ::-webkit-scrollbar-thumb {
+      background-color: ${
+        separatorColorLuminance > backgroundColorLuminance
+          ? lighten(0.1, separatorColor)
+          : darken(0.1, separatorColor)
+      };
+    }
+
     *:focus {
       outline-color: ${t.primaryBackgroundColor};
     }

diff --git a/packages/web/src/index.css b/packages/web/src/index.css
@@ -1,3 +1,13 @@
+::-webkit-scrollbar {
+  width: 1px;
+  height: 1px;
+}
+
+::-webkit-scrollbar-thumb
+{
+  background-color: #49d3b480;
+}
+
 *:focus {
   outline-color: #49d3b4;
 }