diff --git a/scss/themes/_base.scss b/scss/themes/_base.scss
index ffbe2ba9..0b29379c 100644
--- a/scss/themes/_base.scss
+++ b/scss/themes/_base.scss
@@ -92,11 +92,4 @@
   --compose-autosuggest-outline: #{lighten($focus-outline, 5%)};
 
   --compose-button-halo: #{rgba(255, 255, 255, 0.1)};
-}
-
-$scrollbar-face: #{lighten($main-theme-color, 18%)} !default;
-$scrollbar-face-hover: #{lighten($main-theme-color, 20%)} !default;
-$scrollbar-face-active: #{lighten($main-theme-color, 15%)} !default;
-$scrollbar-track: #{darken($body-bg-color, 3%)} !default;
-
-@import "_scrollbars.scss";
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/scss/themes/_dark.scss b/scss/themes/_dark.scss
index 61e26826..45e40002 100644
--- a/scss/themes/_dark.scss
+++ b/scss/themes/_dark.scss
@@ -29,11 +29,4 @@
   --compose-autosuggest-item-hover: #{lighten($main-bg-color, 10%)};
   --compose-autosuggest-item-active: #{lighten($main-bg-color, 15%)};
   --compose-autosuggest-outline: #{lighten($border-color, 20%)};
-}
-
-$scrollbar-face: #{lighten($main-theme-color, 5%)};
-$scrollbar-face-hover: #{lighten($main-theme-color, 7%)};
-$scrollbar-face-active: #{lighten($main-theme-color, 3%)};
-$scrollbar-track: #{darken($body-bg-color, 3%)};
-
-@import "_scrollbars.scss";
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/scss/themes/_dark_scrollbars.scss b/scss/themes/_dark_scrollbars.scss
new file mode 100644
index 00000000..bfc4925a
--- /dev/null
+++ b/scss/themes/_dark_scrollbars.scss
@@ -0,0 +1,6 @@
+$scrollbar-face: #{lighten($main-theme-color, 5%)} !default;
+$scrollbar-face-hover: #{lighten($main-theme-color, 7%)} !default;
+$scrollbar-face-active: #{lighten($main-theme-color, 3%)} !default;
+$scrollbar-track: #{lighten($body-bg-color, 7%)} !default;
+
+@import "_scrollbars.scss";
\ No newline at end of file
diff --git a/scss/themes/_default.scss b/scss/themes/_default.scss
index 9a98cf42..264dcd29 100644
--- a/scss/themes/_default.scss
+++ b/scss/themes/_default.scss
@@ -10,4 +10,5 @@ $toast-bg: #333;
 $focus-outline: lighten($main-theme-color, 30%);
 $compose-background: lighten($main-theme-color, 32%);
 
-@import "_base.scss";
\ No newline at end of file
+@import "_base.scss";
+@import "_light_scrollbars.scss";
\ No newline at end of file
diff --git a/scss/themes/_light_scrollbars.scss b/scss/themes/_light_scrollbars.scss
new file mode 100644
index 00000000..7a33bcda
--- /dev/null
+++ b/scss/themes/_light_scrollbars.scss
@@ -0,0 +1,6 @@
+$scrollbar-face: #{lighten($main-theme-color, 18%)} !default;
+$scrollbar-face-hover: #{lighten($main-theme-color, 20%)} !default;
+$scrollbar-face-active: #{lighten($main-theme-color, 15%)} !default;
+$scrollbar-track: #{darken($body-bg-color, 3%)} !default;
+
+@import "_scrollbars.scss";
\ No newline at end of file
diff --git a/scss/themes/_offline.scss b/scss/themes/_offline.scss
index ca7fbd86..42245a04 100644
--- a/scss/themes/_offline.scss
+++ b/scss/themes/_offline.scss
@@ -11,3 +11,4 @@ $focus-outline: lighten($main-theme-color, 15%);
 $compose-background: lighten($main-theme-color, 17%);
 
 @import "_base.scss";
+@import "_light_scrollbars.scss";
\ No newline at end of file
diff --git a/scss/themes/cobalt.scss b/scss/themes/cobalt.scss
index ed772b15..a6c82466 100644
--- a/scss/themes/cobalt.scss
+++ b/scss/themes/cobalt.scss
@@ -12,6 +12,7 @@ $compose-background: lighten($main-theme-color, 32%);
 
 @import "_base.scss";
 @import "_dark.scss";
+@import "_dark_scrollbars.scss";
 
 :root {
   --settings-list-item-text: #{$main-text-color};
diff --git a/scss/themes/gecko.scss b/scss/themes/gecko.scss
index 519a9a67..dc4696a7 100644
--- a/scss/themes/gecko.scss
+++ b/scss/themes/gecko.scss
@@ -11,3 +11,4 @@ $focus-outline: lighten($main-theme-color, 30%);
 $compose-background: lighten($main-theme-color, 32%);
 
 @import "_base.scss";
+@import "_light_scrollbars.scss";
diff --git a/scss/themes/hacker.scss b/scss/themes/hacker.scss
index a5c17f3c..88c6f4de 100644
--- a/scss/themes/hacker.scss
+++ b/scss/themes/hacker.scss
@@ -13,6 +13,7 @@ $compose-background: lighten($main-theme-color, 52%);
 
 @import "_base.scss";
 @import "_dark.scss";
+@import "_dark_scrollbars.scss";
 
 :root {
   --nav-bg: #{lighten($body-bg-color, 10%)};
diff --git a/scss/themes/hotpants.scss b/scss/themes/hotpants.scss
index 566fca52..1ace4d2e 100644
--- a/scss/themes/hotpants.scss
+++ b/scss/themes/hotpants.scss
@@ -16,3 +16,4 @@ $scrollbar-face-hover: #{lighten($main-theme-color, 14%)};
 $scrollbar-face-active: #{lighten($main-theme-color, 10%)};
 
 @import "_base.scss";
+@import "_light_scrollbars.scss";
diff --git a/scss/themes/majesty.scss b/scss/themes/majesty.scss
index 90942d83..e20f5c56 100644
--- a/scss/themes/majesty.scss
+++ b/scss/themes/majesty.scss
@@ -11,3 +11,4 @@ $focus-outline: lighten($main-theme-color, 30%);
 $compose-background: lighten($main-theme-color, 32%);
 
 @import "_base.scss";
+@import "_light_scrollbars.scss";
\ No newline at end of file
diff --git a/scss/themes/oaken.scss b/scss/themes/oaken.scss
index 5ed00a64..9336726b 100644
--- a/scss/themes/oaken.scss
+++ b/scss/themes/oaken.scss
@@ -11,3 +11,4 @@ $focus-outline: lighten($main-theme-color, 30%);
 $compose-background: lighten($main-theme-color, 32%);
 
 @import "_base.scss";
+@import "_light_scrollbars.scss";
diff --git a/scss/themes/ozark.scss b/scss/themes/ozark.scss
index 7fc6e5b6..b01694b3 100644
--- a/scss/themes/ozark.scss
+++ b/scss/themes/ozark.scss
@@ -11,4 +11,5 @@ $focus-outline: darken($main-theme-color, 10%);
 $compose-background: darken($main-theme-color, 12%);
 
 @import "_base.scss";
-@import "_dark.scss";
\ No newline at end of file
+@import "_dark.scss";
+@import "_dark_scrollbars.scss";
\ No newline at end of file
diff --git a/scss/themes/punk.scss b/scss/themes/punk.scss
index e9f4598b..2e7e5ff1 100644
--- a/scss/themes/punk.scss
+++ b/scss/themes/punk.scss
@@ -13,6 +13,7 @@ $compose-background: lighten($main-theme-color, 52%);
 
 @import "_base.scss";
 @import "_dark.scss";
+@import "_dark_scrollbars.scss";
 
 :root {
   --nav-bg: #{lighten($body-bg-color, 10%)};
diff --git a/scss/themes/riot.scss b/scss/themes/riot.scss
index 72fe3d16..cb9ab20b 100644
--- a/scss/themes/riot.scss
+++ b/scss/themes/riot.scss
@@ -13,6 +13,7 @@ $compose-background: lighten($main-theme-color, 52%);
 
 @import "_base.scss";
 @import "_dark.scss";
+@import "_dark_scrollbars.scss";
 
 :root {
   --nav-bg: #{lighten($body-bg-color, 10%)};
diff --git a/scss/themes/scarlet.scss b/scss/themes/scarlet.scss
index bfba90ce..57b3e52a 100644
--- a/scss/themes/scarlet.scss
+++ b/scss/themes/scarlet.scss
@@ -11,3 +11,4 @@ $focus-outline: lighten($main-theme-color, 30%);
 $compose-background: lighten($main-theme-color, 32%);
 
 @import "_base.scss";
+@import "_light_scrollbars.scss";
diff --git a/scss/themes/seafoam.scss b/scss/themes/seafoam.scss
index ff06b0d9..34b5d7f7 100644
--- a/scss/themes/seafoam.scss
+++ b/scss/themes/seafoam.scss
@@ -11,3 +11,4 @@ $focus-outline: lighten($main-theme-color, 50%);
 $compose-background: lighten($main-theme-color, 52%);
 
 @import "_base.scss";
+@import "_light_scrollbars.scss";
\ No newline at end of file
diff --git a/scss/themes/sorcery.scss b/scss/themes/sorcery.scss
index 450fe33b..d9ee45fa 100644
--- a/scss/themes/sorcery.scss
+++ b/scss/themes/sorcery.scss
@@ -11,8 +11,14 @@ $toast-bg: #333;
 $focus-outline: lighten($main-theme-color, 50%);
 $compose-background: lighten($main-theme-color, 52%);
 
+// override scrollbar color to make it a bit darker
+$scrollbar-face: #{lighten($main-theme-color, 3%)};
+$scrollbar-face-hover: #{lighten($main-theme-color, 5%)};
+$scrollbar-face-active: #{lighten($main-theme-color, 1%)};
+
 @import "_base.scss";
 @import "_dark.scss";
+@import "_dark_scrollbars.scss";
 
 :root {
   --nav-bg: #{lighten($body-bg-color, 10%)};