feat: themed scroll and zoom bars

stylesheets/_global.scss

@@ -23,17 +23,18 @@ body {
   height: 6px;
 }
 
+::-webkit-scrollbar-track {
+  background-color: var(--scroll-bar-track-color);
+}
+
 ::-webkit-scrollbar-thumb {
-  background: var(--color-scroll-bar-thumb);
+  background: var(--scroll-bar-thumb-color);
   border-radius: 20px;
 
   &:hover {
-    background: var(--color-light-gray-color);
+    background: var(--scroll-bar-thumb-hover-color);
   }
 }
-::-webkit-scrollbar-track {
-  background: none;
-}
 
 audio {
   max-width: 100%;

stylesheets/_session_slider.scss

@@ -34,7 +34,7 @@
 .rc-slider-rail {
   position: absolute;
   width: 100%;
-  background: var(--scroll-bar-fill-color);
+  background: var(--zoom-bar-track-color);
 
   height: 8px;
   border-radius: 6px;
@@ -51,24 +51,24 @@
   margin-left: -2.3px;
   cursor: grab;
   border-radius: 4px;
-  background-color: var(--zoom-bar-selector-color);
+  background-color: var(--zoom-bar-thumb-color);
   -ms-touch-action: pan-x;
   touch-action: pan-x;
 }
 .rc-slider-handle:focus {
-  border-color: var(--zoom-bar-selector-color);
+  border-color: var(--zoom-bar-thumb-color);
   box-shadow: none;
   outline: none;
 }
 .rc-slider-handle-click-focused:focus {
-  border-color: var(--zoom-bar-selector-color);
+  border-color: var(--zoom-bar-thumb-color);
   box-shadow: unset;
 }
 .rc-slider-handle:hover {
-  border-color: var(--zoom-bar-selector-color);
+  border-color: var(--zoom-bar-thumb-color);
 }
 .rc-slider-handle:active {
-  border-color: var(--zoom-bar-selector-color);
+  border-color: var(--zoom-bar-thumb-color);
   box-shadow: none;
   cursor: -webkit-grabbing;
   cursor: grabbing;
@@ -124,7 +124,7 @@
   margin-right: -4px;
 }
 .rc-slider-disabled {
-  background-color: var(--scroll-bar-fill-color);
+  background-color: var(--zoom-bar-track-color);
 }
 .rc-slider-disabled .rc-slider-handle,
 .rc-slider-disabled .rc-slider-dot {

ts/themes/SessionTheme.tsx

@@ -580,13 +580,14 @@ export const SessionGlobalStyles = createGlobalStyle`
     --search-bar-icon-hover-color: var(--text-primary-color);
 
     /* Scroll Bars */
-    /* TODO Theming think this is the track? Should add thumb and other scroll colors here */
-    /* Default */
-    --scroll-bar-fill-color: var(--text-secondary-color);
+    --scroll-bar-track-color: none;
+    --scroll-bar-thumb-color: ${THEMES.CLASSIC_LIGHT.COLOR2};
+    --scroll-bar-thumb-hover-color: ${THEMES.CLASSIC_LIGHT.COLOR1};
+
     /* Zoom Bar */
+    --zoom-bar-track-color: ${THEMES.CLASSIC_LIGHT.COLOR3};
+    --zoom-bar-thumb-color: var(--primary-color);
     --zoom-bar-interval-color: var(--text-secondary-color);
-    /* TODO Theming think this is the thumb? */
-    --zoom-bar-selector-color: var(--primary-color);
 
     /* Toggle Switch */
     --toggle-switch-ball-color: var(--white-color);

ts/themes/switchTheme.tsx

@@ -248,16 +248,22 @@ function loadClassicLight(primaryColor?: PrimaryColorStateType) {
     'var(--text-primary-color)'
   );
 
+  document.documentElement.style.setProperty('--scroll-bar-track-color', 'none');
   document.documentElement.style.setProperty(
-    '--scroll-bar-fill-color',
-    'var(--text-secondary-color)'
+    '--scroll-bar-thumb-color',
+    THEMES.CLASSIC_LIGHT.COLOR2
+  );
+  document.documentElement.style.setProperty(
+    '--scroll-bar-thumb-hover-color',
+    THEMES.CLASSIC_LIGHT.COLOR1
   );
 
+  document.documentElement.style.setProperty('--zoom-bar-track-color', THEMES.CLASSIC_LIGHT.COLOR3);
+  document.documentElement.style.setProperty('--zoom-bar-thumb-color', 'var(--primary-color)');
   document.documentElement.style.setProperty(
     '--zoom-bar-interval-color',
     'var(--text-secondary-color)'
   );
-  document.documentElement.style.setProperty('--zoom-bar-selector-color', 'var(--primary-color)');
 
   document.documentElement.style.setProperty('--toggle-switch-ball-color', 'var(--white-color)');
   document.documentElement.style.setProperty(
@@ -672,13 +678,19 @@ function loadClassicDark(primaryColor?: PrimaryColorStateType) {
     'var(--text-primary-color)'
   );
 
-  document.documentElement.style.setProperty('--scroll-bar-fill-color', THEMES.CLASSIC_DARK.COLOR4);
-
+  document.documentElement.style.setProperty('--scroll-bar-track-color', 'none');
   document.documentElement.style.setProperty(
-    '--zoom-bar-interval-color',
+    '--scroll-bar-thumb-color',
+    THEMES.CLASSIC_DARK.COLOR3
+  );
+  document.documentElement.style.setProperty(
+    '--scroll-bar-thumb-hover-color',
     THEMES.CLASSIC_DARK.COLOR4
   );
-  document.documentElement.style.setProperty('--zoom-bar-selector-color', 'var(--primary-color)');
+
+  document.documentElement.style.setProperty('--zoom-bar-track-color', THEMES.CLASSIC_DARK.COLOR3);
+  document.documentElement.style.setProperty('--zoom-bar-thumb-color', 'var(--primary-color)');
+  document.documentElement.style.setProperty('--zoom-bar-interval-color', 'var(--primary-color)');
 
   document.documentElement.style.setProperty('--toggle-switch-ball-color', 'var(--white-color)');
   document.documentElement.style.setProperty(
@@ -1092,16 +1104,19 @@ function loadOceanLight(primaryColor?: PrimaryColorStateType) {
     'var(--text-primary-color)'
   );
 
+  document.documentElement.style.setProperty('--scroll-bar-track-color', 'none');
+  document.documentElement.style.setProperty('--scroll-bar-thumb-color', THEMES.OCEAN_LIGHT.COLOR4);
   document.documentElement.style.setProperty(
-    '--scroll-bar-fill-color',
-    'var(--text-secondary-color)'
+    '--scroll-bar-thumb-hover-color',
+    THEMES.OCEAN_LIGHT.COLOR3
   );
 
+  document.documentElement.style.setProperty('--zoom-bar-track-color', THEMES.OCEAN_LIGHT.COLOR4);
+  document.documentElement.style.setProperty('--zoom-bar-thumb-color', 'var(--primary-color)');
   document.documentElement.style.setProperty(
     '--zoom-bar-interval-color',
     'var(--text-secondary-color)'
   );
-  document.documentElement.style.setProperty('--zoom-bar-selector-color', 'var(--primary-color)');
 
   document.documentElement.style.setProperty('--toggle-switch-ball-color', 'var(--white-color)');
   document.documentElement.style.setProperty(
@@ -1510,13 +1525,16 @@ function loadOceanDark(primaryColor?: PrimaryColorStateType) {
     'var(--text-primary-color)'
   );
 
+  document.documentElement.style.setProperty('--scroll-bar-track-color', 'none');
+  document.documentElement.style.setProperty('--scroll-bar-thumb-color', THEMES.OCEAN_DARK.COLOR4);
   document.documentElement.style.setProperty(
-    '--scroll-bar-fill-color',
-    'var(text-secondary-color)'
+    '--scroll-bar-thumb-hover-color',
+    THEMES.OCEAN_DARK.COLOR5
   );
 
-  document.documentElement.style.setProperty('--zoom-bar-interval-color', THEMES.OCEAN_DARK.COLOR4);
-  document.documentElement.style.setProperty('--zoom-bar-selector-color', 'var(--primary-color)');
+  document.documentElement.style.setProperty('--zoom-bar-track-color', THEMES.OCEAN_DARK.COLOR4);
+  document.documentElement.style.setProperty('--zoom-bar-thumb-color', 'var(--primary-color)');
+  document.documentElement.style.setProperty('--zoom-bar-interval-color', 'var(--primary-color)');
 
   document.documentElement.style.setProperty('--toggle-switch-ball-color', 'var(--white-color)');
   document.documentElement.style.setProperty(