diff --git a/.changeset/twenty-moles-provide.md b/.changeset/twenty-moles-provide.md
new file mode 100644
index 000000000..582ccf9d8
--- /dev/null
+++ b/.changeset/twenty-moles-provide.md
@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fix scrollbar color mixin to use body color variable
diff --git a/core/scss/mixins/_mixins.scss b/core/scss/mixins/_mixins.scss
index 382466ba0..a18dc7ba9 100644
--- a/core/scss/mixins/_mixins.scss
+++ b/core/scss/mixins/_mixins.scss
@@ -15,7 +15,7 @@
 
 @mixin scrollbar($color: var(--#{$prefix}body-color-rgb)) {
   #{if(&, "&", "*")} {
-    scrollbar-color: rgba(var(--#{$prefix}scrollbar-color, var(--#{$prefix}body-color-rgb)), .16);
+    scrollbar-color: color-transparent(var(--#{$prefix}scrollbar-color, var(--#{$prefix}body-color)), .20);
   }
 
   #{if(&, "&", "*")}::-webkit-scrollbar {
@@ -27,7 +27,7 @@
   #{if(&, "&", "*")}::-webkit-scrollbar-thumb {
     border-radius: 1rem;
     border: 5px solid transparent;
-    box-shadow: inset 0 0 0 1rem rgba(var(--#{$prefix}scrollbar-color, var(--#{$prefix}body-color-rgb)), .16);
+    box-shadow: inset 0 0 0 1rem color-transparent(var(--#{$prefix}scrollbar-color, var(--#{$prefix}body-color)), .20);
   }
 
   #{if(&, "&", "*")}::-webkit-scrollbar-track {
@@ -35,7 +35,7 @@
   }
 
   #{if(&, "&", "*")}:hover::-webkit-scrollbar-thumb {
-    box-shadow: inset 0 0 0 1rem rgba(var(--#{$prefix}scrollbar-color, var(--#{$prefix}body-color-rgb)), .32);
+    box-shadow: inset 0 0 0 1rem color-transparent(var(--#{$prefix}scrollbar-color, var(--#{$prefix}body-color)), .40);
   }
 
   #{if(&, "&", "*")}::-webkit-scrollbar-corner {