add custon light/black scrollbar style

stylesheets/_emoji.scss

@@ -130,15 +130,4 @@ button.emoji {
   .ep-slide {
     background-color: $blue;
   }
-  .ep ::-webkit-scrollbar {
-    // matches what is set in _global.scss; needs !important to override emoji panel CSS
-    width: 9px !important;
-  }
-  .ep ::-webkit-scrollbar-thumb {
-    background: $color-light-35;
-
-    &:hover {
-      background: $color-light-45;
-    }
-  }
 }

stylesheets/_global.scss

@@ -16,26 +16,26 @@ body {
   color: $color-light-90;
 }
 
+// scrollbars
 ::-webkit-scrollbar {
   width: 9px;
   height: 9px;
 }
 
-::-webkit-scrollbar-track {
-  background: $color-white;
-}
-
 ::-webkit-scrollbar-thumb {
-  background: $color-light-35;
+  @include themify($themes) {
-  border: 2px solid $color-white;
+    background: themed('scrollBarThumb');
+    border: solid 2px themed('textColorOpposite');
 
-  &:hover {
+    &:hover {
-    background: $color-light-45;
+      background: $color-light-45;
+    }
   }
 }
-
+::-webkit-scrollbar-track {
-::-webkit-scrollbar-corner {
+  @include themify($themes) {
-  background: $color-white;
+    background: themed('scrollBarTrack');
+  }
 }
 
 audio {
@@ -644,14 +644,6 @@ $loading-height: 16px;
   padding: 0;
   background: inherit;
 
-  ::-webkit-scrollbar-track {
-    background: $color-dark-85;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    border: 2px solid $color-dark-85;
-  }
-
   .step-body {
     width: 80%;
     min-width: 100px;

stylesheets/_index.scss

@@ -79,14 +79,6 @@
 }
 
 .gutter {
-  ::-webkit-scrollbar-track {
-    background: $color-dark-85;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    border: 2px solid $color-dark-85;
-  }
-
   display: flex;
   flex-direction: column;
   float: left;

stylesheets/_session.scss

@@ -169,7 +169,7 @@ textarea {
 
     &.green {
       @include themify($themes) {
-        @include transparent-background(themed('accent'));
+        @include transparent-background(themed('buttonGreen'));
       }
     }
     &.white {

stylesheets/_session_left_pane.scss

@@ -145,6 +145,7 @@ $session-compose-margin: 20px;
     align-items: center;
     height: $main-view-header-height;
     padding-right: 7px;
+    transition: $session-transition-duration;
 
     .session-button {
       margin-left: auto;
@@ -189,8 +190,9 @@ $session-compose-margin: 20px;
   }
 
   &-overlay {
-    background: linear-gradient(180deg, #171717 0%, $session-background 100%);
+    @include themify($themes) {
-    box-shadow: 0 0 100px 0 rgba(0, 0, 0, 0.5);
+      background: themed('leftpaneOverlayBackground');
+    }
     display: flex;
     flex-direction: column;
     flex-grow: 1;
@@ -217,8 +219,10 @@ $session-compose-margin: 20px;
 
       .green-border {
         position: absolute;
-        color: $session-color-green;
+        @include themify($themes) {
-        background-color: $session-color-green;
+          color: themed('accent');
+          background-color: themed('accent');
+        }
         height: 5px;
         left: -10px;
         right: -10px;

stylesheets/_session_theme.scss

@@ -126,21 +126,27 @@ h1 {
 
 h2 {
   @include session-h-title;
-  color: $session-color-white;
+  @include themify($themes) {
+    color: themed('textColor');
+  }
   font-size: 22px;
   text-align: center;
 }
 
 h3 {
   @include session-h-title;
-  color: $session-color-white;
+  @include themify($themes) {
+    color: themed('textColor');
+  }
   font-size: 18px;
   padding-top: 22px;
 }
 
 h4 {
   @include session-h-title;
-  color: $session-color-white;
+  @include themify($themes) {
+    color: themed('textColor');
+  }
   font-size: 17px;
   text-align: center;
 }

stylesheets/_theme_dark.scss

@@ -193,35 +193,8 @@ body.dark-theme {
     }
   }
 
-  .emoji-panel-container {
-    .ep ::-webkit-scrollbar-thumb {
-      background: $color-dark-55;
-
-      &:hover {
-        background: $color-dark-30;
-      }
-    }
-  }
-
   // _global
 
-  ::-webkit-scrollbar-track {
-    background: $color-black;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background: $color-dark-55;
-    border: 2px solid $color-black;
-
-    &:hover {
-      background: $color-dark-30;
-    }
-  }
-
-  ::-webkit-scrollbar-corner {
-    background: $color-black;
-  }
-
   .dark-overlay {
     background-color: $color-gray-95;
   }
@@ -427,14 +400,6 @@ body.dark-theme {
 
   .gutter {
     background-color: $color-dark-85;
-
-    ::-webkit-scrollbar-track {
-      background: $color-dark-85;
-    }
-
-    ::-webkit-scrollbar-thumb {
-      border: 2px solid $color-dark-85;
-    }
   }
   .network-status-container {
     .network-status {

stylesheets/themes.scss

@@ -16,7 +16,6 @@ $themes: (
     modalBorder: #212121,
     fakeChatBubbleBackground: #f5f5f5,
     fakeChatBubbleText: #000,
-    navigationBarBackground: #fcfcfc,
     newConversationButtonShadow: hsl(151, 89%, 26%),
     // text
       textColor: #000,
@@ -27,6 +26,7 @@ $themes: (
     // buttons
       backgroundPrimary: #272726,
     foregroundPrimary: #fff,
+    buttonGreen: #272726,
     // conversation view
       messageSelected:
       linear-gradient(270deg, rgba(#00f480, 1), rgba(#00f480, 0.6)),
@@ -40,6 +40,10 @@ $themes: (
     conversationItemSelected: #f0f0f0,
     clickableHovered: #dfdfdf,
     borderActionPanel: 1px solid #f1f1f1,
+    leftpaneOverlayBackground: #fff,
+    // scrollbars
+      scrollBarTrack: #fcfcfc,
+    scrollBarThumb: #474646,
   ),
   dark: (
     accent: #00f782,
@@ -56,7 +60,6 @@ $themes: (
     modalBorder: #212121,
     fakeChatBubbleBackground: #3f4146,
     fakeChatBubbleText: #000,
-    navigationBarBackground: #161616,
     newConversationButtonShadow: #077c44,
     // text
       textColor: #fff,
@@ -67,6 +70,7 @@ $themes: (
     // buttons
       backgroundPrimary: #474646,
     foregroundPrimary: #fff,
+    buttonGreen: #00f782,
     // conversation view
       messageSelected:
       linear-gradient(270deg, rgba(#00f480, 1), rgba(#00f480, 0.6)),
@@ -80,6 +84,10 @@ $themes: (
     conversationItemSelected: #404040,
     clickableHovered: #414347,
     borderActionPanel: none,
+    leftpaneOverlayBackground: linear-gradient(180deg, #171717 0%, #121212 100%),
+    // scrollbars
+      scrollBarTrack: #1b1b1b,
+    scrollBarThumb: #474646,
   ),
 );