From cc99e2d02bacfbe20d9a90cc6bd1006cc1a51c94 Mon Sep 17 00:00:00 2001
From: Tejas Srikanth <tcsrikan@csclub.uwaterloo.ca>
Date: Fri, 28 Apr 2023 18:34:46 -0400
Subject: [PATCH] add light and dark mode scrollbar (#571)

Co-authored-by: Tejas Srikanth <tcsrikan@high-fructose-corn-syrup.csclub.uwaterloo.ca>
Reviewed-on: https://git.csclub.uwaterloo.ca/www/www-new/pulls/571
Reviewed-by: Shahan Nedadahandeh <snedadah@csclub.uwaterloo.ca>
---
 components/Theme.tsx |  4 ++++
 pages/_app.css       | 49 +++++++++++++++++++++++++++++++++++++++++---
 2 files changed, 50 insertions(+), 3 deletions(-)

diff --git a/components/Theme.tsx b/components/Theme.tsx
index c7471a7b..96b56c8d 100644
--- a/components/Theme.tsx
+++ b/components/Theme.tsx
@@ -19,6 +19,10 @@ export const PALETTE_NAMES = [
   "--primary-background",
   "--secondary-background",
 
+  "--scrollbar-track",
+  "--scrollbar-thumb",
+  "--scrollbar-hover",
+
   "--primary-accent",
   "--primary-accent-soft",
   "--primary-accent-light",
diff --git a/pages/_app.css b/pages/_app.css
index fd7aa49c..b4db106c 100644
--- a/pages/_app.css
+++ b/pages/_app.css
@@ -42,7 +42,7 @@ body {
 
   --light--icon: #2A2A62;
 
-  --light--navbar-page-overlay: hsla(0,0%,47.1%,0.6980392156862745);
+  --light--navbar-page-overlay: hsla(0, 0%, 47.1%, 0.6980392156862745);
   --light--code-background: #f0f0f0;
 
   --light--button-background: #1482e3;
@@ -56,6 +56,14 @@ body {
   --light--border: #2a2a62;
   --light--marker: #1482e3;
 
+  --dark--scrollbar-hover: #626294;
+  --dark--scrollbar-thumb: var(--dark--code-background);
+  --dark--scrollbar-track: var(--dark--secondary-background);
+
+  --light--scrollbar-hover: var(--light--blue-gradient);
+  --light--scrollbar-thumb: var(--dark--primary-accent-soft);
+  --light--scrollbar-track: var(--light--dark-card-background);
+
   --dark--primary-background: #171729;
   --dark--secondary-background: #252542;
 
@@ -72,7 +80,7 @@ body {
 
   --dark--form-invalid: #9f616a;
   --dark--warning-background: #dd0014;
-  --dark--warning-text: #ffffff; 
+  --dark--warning-text: #ffffff;
 
   --dark--link: #4ED4B2;
   --dark--link-hover: #C1F0E4;
@@ -120,6 +128,10 @@ body {
   --secondary-accent: var(--light--secondary-accent);
   --secondary-accent-light: var(--light--secondary-accent-light);
 
+  --scrollbar-track: var(--light--scrollbar-track);
+  --scrollbar-thumb: var(--light--link);
+  --scrollbar-hover: var(--light--link-hover);
+
   --primary-heading: var(--light--primary-heading);
 
   --form-invalid: var(--light--form-invalid);
@@ -170,6 +182,8 @@ body {
   margin: 0;
 }
 
+
+
 input {
   font-family: "Poppins", "sans-serif";
 }
@@ -225,11 +239,12 @@ p {
  * A lot of elements right next to an h4 (eg p, ol, ul, etc) have a 16px margin.
  * We need to make sure that the next item has an 8px margin-top.
  */
-h4 + * {
+h4+* {
   margin-top: calc(8rem / 16);
 }
 
 @media only screen and (max-width: calc(768rem / 16)) {
+
   /* h1, h2 = h3 on mobile */
   h1,
   h2 {
@@ -241,6 +256,11 @@ h4 + * {
   }
 }
 
+
+
+
+
+
 @media only screen and (prefers-color-scheme: dark) {
   body {
     --primary-background: var(--dark--primary-background);
@@ -277,6 +297,10 @@ h4 + * {
 
     --icon: var(--dark--icon);
 
+    --scrollbar-track: var(--dark--scrollbar-track);
+    --scrollbar-thumb: var(--dark--scrollbar-thumb);
+    --scrollbar-hover: var(--dark--scrollbar-hover);
+
     --primary-title: var(--dark--primary-title);
     --primary-subtitle: var(--dark--primary-subtitle);
     --secondary-subtitle: var(--dark--secondary-subtitle);
@@ -293,5 +317,24 @@ h4 + * {
     --blue-gradient: var(--dark--blue-gradient);
     --border: var(--dark--border);
     --marker: var(--dark--marker);
+
   }
+
 }
+
+::-webkit-scrollbar {
+  width: 1em;
+  height: 1em;
+}
+
+::-webkit-scrollbar-track {
+  background-color: var(--scrollbar-track);
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--scrollbar-thumb);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: var(--scrollbar-hover);
+}
\ No newline at end of file