Subtle scroll bar

index.html

@@ -18,6 +18,11 @@
 				--page-transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
 			}
 
+			:root .theme-dark {
+				--theme-background: #1a1a1a !important;
+				--theme-background-contrast: white !important;
+			}
+
 			* { box-sizing: border-box; transition: var(--page-transition); }
 
 			html, body {

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ztimson/css-utils",
-	"version": "2.0.1",
+	"version": "2.0.4",
 	"description": "CSS Utility Classes",
 	"readme": "README.md",
 	"scripts": {

src/main.scss

@@ -5,6 +5,8 @@
 // Colors
 :root {
 	// Theme colors -- what ever you like
+	--theme-background: #fafafa;
+	--theme-background-contrast: black;
 	--theme-primary: #4979de;
 	--theme-primary-contrast: black;
 	--theme-accent: #2caec0;
@@ -24,9 +26,6 @@
 
 	// Light theme
 	&, .theme-light {
-		--theme-background: #fafafa;
-		--theme-background-contrast: white;
-
 		--theme-surface: #ffffff;
 		--theme-border: #E5E7EB;
 		--theme-muted: #6c757d;
@@ -38,9 +37,6 @@
 
 	// Dark theme
 	.theme-dark {
-		--theme-background: #1a1a1a;
-		--theme-background-contrast: black;
-
 		--theme-surface: #2e2e2e;
 		--theme-border: #374151;
 		--theme-muted: #cccccc;
@@ -110,28 +106,18 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100);
 }
 
 .fix-scrollbar {
-	* {
-		scrollbar-width: thin;
-		scrollbar-color: var(--theme-primary) var(--theme-background);
-	}
-
 	*::-webkit-scrollbar {
-		width: 8px;
+		width: 10px;
-		height: 8px;
+		height: 10px;
 	}
-
-	*::-webkit-scrollbar-track {
-		background: var(--theme-background);
-	}
-
 	*::-webkit-scrollbar-thumb {
-		background-color: var(--theme-primary);
+		background: var(--theme-muted);
-		border-radius: 4px;
+		border-radius: 999px;
-		border: 2px solid var(--theme-background);
+		border: 3px solid transparent;
+		background-clip: padding-box;
 	}
-
+	*::-webkit-scrollbar-track {
-	*::-webkit-scrollbar-thumb:hover {
+		background: transparent;
-		background-color: var(--theme-accent);
 	}
 }