From 50dfc988cde38d3915a5a3bafd67a2028655c756 Mon Sep 17 00:00:00 2001
From: thisconnect <this@shiftcrypto.ch>
Date: Mon, 11 Nov 2024 13:36:00 +0100
Subject: [PATCH] frontend: use darkmode colors for scrollbar

---
 frontends/web/src/components/guide/guide.module.css |  5 +++++
 frontends/web/src/components/terms/terms.module.css |  4 ----
 frontends/web/src/style/base.css                    | 13 ++++++++-----
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/frontends/web/src/components/guide/guide.module.css b/frontends/web/src/components/guide/guide.module.css
index 5cabca5019..04e7a2253f 100644
--- a/frontends/web/src/components/guide/guide.module.css
+++ b/frontends/web/src/components/guide/guide.module.css
@@ -40,6 +40,11 @@
     will-change: margin-right, transform;
 }
 
+.guide::-webkit-scrollbar-thumb {
+    background-color: white;
+}
+
+
 .header {
     background-color: var(--color-blue);
     height: var(--header-height);
diff --git a/frontends/web/src/components/terms/terms.module.css b/frontends/web/src/components/terms/terms.module.css
index 262e260e65..4098619777 100644
--- a/frontends/web/src/components/terms/terms.module.css
+++ b/frontends/web/src/components/terms/terms.module.css
@@ -30,10 +30,6 @@
   padding: var(--space-quarter) 1em 1em 1em;
 }
 
-.disclaimer::-webkit-scrollbar-track {
-  background-color: #fff;
-}
-
 .disclaimer .title {
   font-size: .875rem;
   font-weight: bold;
diff --git a/frontends/web/src/style/base.css b/frontends/web/src/style/base.css
index 1a1939c1b3..0098d19bc2 100644
--- a/frontends/web/src/style/base.css
+++ b/frontends/web/src/style/base.css
@@ -37,20 +37,23 @@ h1, h2, h3, h4, h5 {
     line-height: 1.25;
 }
 
-::-webkit-scrollbar-track {
-    background-color: #F5F5F5;
+::-webkit-scrollbar {
+    background-color: transparent;
 }
 
 ::-webkit-scrollbar {
+    background-color: transparent;
     width: 4px;
-    background-color: #F5F5F5;
+}
+::-webkit-scrollbar-track {
+    background-color: transparent;
 }
 
 ::-webkit-scrollbar-thumb {
-    background-color: var(--color-gray);
-    /* border: 2px solid #555555; */
+    background-color: var(--color-secondary);
 }
 
+
 p {
     font-weight: 400;
     font-size: var(--size-default);