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.3",
 	"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;
@@ -112,7 +108,7 @@ $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);
+		scrollbar-color: var(--theme-surface) transparent;
 	}
 
 	*::-webkit-scrollbar {
@@ -121,17 +117,17 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100);
 	}
 
 	*::-webkit-scrollbar-track {
-		background: var(--theme-background);
+		background: transparent;
 	}
 
 	*::-webkit-scrollbar-thumb {
-		background-color: var(--theme-primary);
+		background-color: var(--theme-surface);
 		border-radius: 4px;
-		border: 2px solid var(--theme-background);
+		border: 2px solid var(--theme-surface);
 	}
 
 	*::-webkit-scrollbar-thumb:hover {
-		background-color: var(--theme-accent);
+		background-color: var(--theme-primary);
 	}
 }