Scroll bar visible in dark mode

GDSC-Jadavpur-University · Oct 5, 2023 · f84289f · f84289f
1 parent 9708c01
commit f84289f
Showing 1 changed file with 36 additions and 12 deletions.
diff --git a/components/ThemeSwitcher.jsx b/components/ThemeSwitcher.jsx
@@ -10,18 +10,42 @@ export const ThemeSwitcher = () => {
   useEffect(() => setMounted(true), []);
   if (!mounted) return null;
 
+  // Define CSS classes for the scrollbar based on the theme
+  const scrollbarStyle = theme === "dark" ? "dark-scrollbar" : "light-scrollbar";
+
   return (
-    <button
-      aria-label="Toggle Dark Mode"
-      type="button"
-      className="flex items-center justify-center rounded-lg p-2 transition-colors hover:bg-zinc-300 dark:hover:bg-zinc-700"
-      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
-    >
-      {theme === "dark" ? (
-        <SunIcon className="h-5 w-5 text-orange-300" />
-      ) : (
-        <MoonIcon className="h-5 w-5 text-slate-800" />
-      )}
-    </button>
+    <div>
+      <button
+        aria-label="Toggle Dark Mode"
+        type="button"
+        className="flex items-center justify-center rounded-lg p-2 transition-colors hover:bg-zinc-300 dark:hover:bg-zinc-700"
+        onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+      >
+        {theme === "dark" ? (
+          <SunIcon className="h-5 w-5 text-orange-300" />
+        ) : (
+          <MoonIcon className="h-5 w-5 text-slate-800" />
+        )}
+      </button>
+
+      {/* Scroll Down Button */}
+      {/* Add content here or remove the button if you don't want it */}
+
+      {/* Apply custom scrollbar styles based on the theme */}
+      <style>
+        {`
+          ::-webkit-scrollbar {
+            width: 8px;
+          }
+          ::-webkit-scrollbar-thumb {
+            background-color: ${theme === "dark" ? "#333" : "#ccc"};
+          }
+          ::-webkit-scrollbar-thumb:hover {
+            background-color: ${theme === "dark" ? "#555" : "#999"};
+          }
+        `}
+      </style>
+    </div>
   );
 };
+