Added Custome Scrolbar

Bitbox-Connect · Oct 19, 2024 · bb9e459 · bb9e459
1 parent 7a616e9
commit bb9e459
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 1 deletion.
diff --git 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
@@ -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 */
 }