diff --git a/scss/themes/_base.scss b/scss/themes/_base.scss
index 91a55a8..ffbe2ba 100644
--- a/scss/themes/_base.scss
+++ b/scss/themes/_base.scss
@@ -93,3 +93,10 @@
--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
diff --git a/scss/themes/_dark.scss b/scss/themes/_dark.scss
index 45e4000..61e2682 100644
--- a/scss/themes/_dark.scss
+++ b/scss/themes/_dark.scss
@@ -29,4 +29,11 @@
--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%)};
-}
\ No newline at end of file
+}
+
+$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
diff --git a/scss/themes/_scrollbars.scss b/scss/themes/_scrollbars.scss
new file mode 100644
index 0000000..8adcd7d
--- /dev/null
+++ b/scss/themes/_scrollbars.scss
@@ -0,0 +1,30 @@
+html {
+ scrollbar-face-color: $scrollbar-face;
+ scrollbar-track-color: $scrollbar-track;
+}
+
+::-webkit-scrollbar {
+ width: 12px;
+ height: 12px;
+}
+
+::-webkit-scrollbar-thumb {
+ background: $scrollbar-face;
+ border-radius: 0;
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: $scrollbar-face-hover;
+}
+
+::-webkit-scrollbar-thumb:active {
+ background: $scrollbar-face-active;
+}
+
+::-webkit-scrollbar-track, ::-webkit-scrollbar-track:hover, ::-webkit-scrollbar-track:active {
+ background: $scrollbar-track
+}
+
+::-webkit-scrollbar-corner {
+ background: transparent;
+}
\ No newline at end of file
diff --git a/scss/themes/hotpants.scss b/scss/themes/hotpants.scss
index 4054569..566fca5 100644
--- a/scss/themes/hotpants.scss
+++ b/scss/themes/hotpants.scss
@@ -10,4 +10,9 @@ $toast-bg: #333;
$focus-outline: lighten($main-theme-color, 15%);
$compose-background: lighten($main-theme-color, 17%);
+// override scrollbar color to improve contrast
+$scrollbar-face: #{lighten($main-theme-color, 12%)};
+$scrollbar-face-hover: #{lighten($main-theme-color, 14%)};
+$scrollbar-face-active: #{lighten($main-theme-color, 10%)};
+
@import "_base.scss";
diff --git a/templates/2xx.html b/templates/2xx.html
index 5309ad2..e721627 100644
--- a/templates/2xx.html
+++ b/templates/2xx.html
@@ -16,11 +16,11 @@