diff --git a/static/css/theme-blue.css b/static/css/theme-blue.css
index 648cac0029..9e1e76f1e1 100644
--- a/static/css/theme-blue.css
+++ b/static/css/theme-blue.css
@@ -5,6 +5,10 @@
    - remove the following `@import` of the self-defined chroma stylesheet */
 @import "chroma-learn.css";
 
+:root {
+    color-scheme: only light; /* set browser scrollbar color */
+}
+
 :root {
     --MAIN-TEXT-color: #323232; /* Color of text by default */
     --MAIN-TITLES-TEXT-color: #5e5e5e; /* Color of titles h2-h3-h4-h5-h6 */
diff --git a/static/css/theme-green.css b/static/css/theme-green.css
index abc2435f1d..a29bde92f6 100644
--- a/static/css/theme-green.css
+++ b/static/css/theme-green.css
@@ -5,6 +5,10 @@
    - remove the following `@import` of the self-defined chroma stylesheet */
 @import "chroma-learn.css";
 
+:root {
+    color-scheme: only light; /* set browser scrollbar color */
+}
+
 :root {
     --MAIN-TEXT-color: #323232; /* Color of text by default */
     --MAIN-TITLES-TEXT-color: #5e5e5e; /* Color of titles h2-h3-h4-h5-h6 */
diff --git a/static/css/theme-learn.css b/static/css/theme-learn.css
index 6bc79d746c..0dad5ce35c 100644
--- a/static/css/theme-learn.css
+++ b/static/css/theme-learn.css
@@ -5,6 +5,10 @@
    - remove the following `@import` of the self-defined chroma stylesheet */
 @import "chroma-learn.css";
 
+:root {
+    color-scheme: only light; /* set browser scrollbar color */
+}
+
 :root {
     --MAIN-TEXT-color: #323232; /* Color of text by default */
     --MAIN-TITLES-TEXT-color: #5e5e5e; /* Color of titles h2-h3-h4-h5-h6 */
diff --git a/static/css/theme-neon.css b/static/css/theme-neon.css
index 15be486cc8..d0556b09a6 100644
--- a/static/css/theme-neon.css
+++ b/static/css/theme-neon.css
@@ -9,6 +9,10 @@
    ignore this variant in IE completely */
 @supports not (-ms-high-contrast:none) {
 
+:root {
+    color-scheme: only dark; /* set browser scrollbar color */
+}
+
 :root {
     --PRIMARY-color: #f300b2; /* brand primary color */
     --SECONDARY-color: #1c90f3; /* brand secondary color */
diff --git a/static/css/theme-red.css b/static/css/theme-red.css
index 84148ef7d8..84befd565b 100644
--- a/static/css/theme-red.css
+++ b/static/css/theme-red.css
@@ -5,6 +5,10 @@
    - remove the following `@import` of the self-defined chroma stylesheet */
 @import "chroma-learn.css";
 
+:root {
+    color-scheme: only light; /* set browser scrollbar color */
+}
+
 :root {
     --MAIN-TEXT-color: #323232; /* Color of text by default */
     --MAIN-TITLES-TEXT-color: #5e5e5e; /* Color of titles h2-h3-h4-h5-h6 */
diff --git a/static/css/theme-relearn-dark.css b/static/css/theme-relearn-dark.css
index 7ad782c305..fd8358cb3c 100644
--- a/static/css/theme-relearn-dark.css
+++ b/static/css/theme-relearn-dark.css
@@ -5,6 +5,10 @@
    - remove the following `@import` of the self-defined chroma stylesheet */
 @import "chroma-relearn-dark.css";
 
+:root {
+    color-scheme: only dark; /* set browser scrollbar color */
+}
+
 :root {
     --PRIMARY-color: #7dc903; /* brand primary color */
     --SECONDARY-color: #6c8ce3; /* brand secondary color */
diff --git a/static/css/theme-relearn-light.css b/static/css/theme-relearn-light.css
index e79dd9a706..3fc8e096a2 100644
--- a/static/css/theme-relearn-light.css
+++ b/static/css/theme-relearn-light.css
@@ -5,6 +5,10 @@
    - remove the following `@import` of the self-defined chroma stylesheet */
 @import "chroma-relearn-light.css";
 
+:root {
+    color-scheme: only light; /* set browser scrollbar color */
+}
+
 :root {
     --PRIMARY-color: #7dc903; /* brand primary color */
     --SECONDARY-color: #486ac9; /* brand secondary color */