From bb9e459266f96d13278a80f378c2fdc59e5e5976 Mon Sep 17 00:00:00 2001
From: Shariq <shariqsd2003@gmail.com>
Date: Sat, 19 Oct 2024 11:41:11 +0530
Subject: [PATCH] Added Custome Scrolbar

---
 client/src/component/Navbar.jsx |  2 +-
 client/src/index.css            | 41 +++++++++++++++++++++++++++++++++
 2 files changed, 42 insertions(+), 1 deletion(-)

diff --git a/client/src/component/Navbar.jsx b/client/src/component/Navbar.jsx
index e04e93d..1d7a019 100644
--- a/client/src/component/Navbar.jsx
+++ b/client/src/component/Navbar.jsx
@@ -255,7 +255,7 @@ function Navbar(props) {
                             onChange={props.toggleMode}
                           />
                           <label htmlFor="darkmode-toggle">
-                            <FaRegSun
+                            <FaSun
                               // className="sun"
                               style={{
                                 color: props.mode === "dark" ? "white" : "orange", // Change color for dark mode
diff --git a/client/src/index.css b/client/src/index.css
index dae3ff7..2f5adf3 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -48,4 +48,45 @@ html.dark-mode {
 
 .modal-content button:hover {
   background-color: #0056b3;
+}
+
+::-webkit-scrollbar {
+  width: 12px;
+}
+
+::-webkit-scrollbar-track {
+  background: #ffffff;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #000000;
+  border-radius: 10px;
+  border: 3px solid #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #a2a2a2;
+}
+
+/* Dark Theme Scrollbar */
+body.dark-mode ::-webkit-scrollbar {
+  width: 12px;
+}
+
+body.dark-mode ::-webkit-scrollbar-track {
+  background: #000000;
+  /* Black track */
+}
+
+body.dark-mode ::-webkit-scrollbar-thumb {
+  background-color: #ffffff;
+  /* White thumb */
+  border-radius: 10px;
+  border: 3px solid #1a1a1a;
+  /* Dark border for the thumb */
+}
+
+body.dark-mode ::-webkit-scrollbar-thumb:hover {
+  background: #e5e5e5;
+  /* Lighter color on hover */
 }
\ No newline at end of file