From c8b8b244413da2e5a335ac10a67c3ce7b34f4c20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Kuna?=
 <1282324+codecalm@users.noreply.github.com>
Date: Sat, 7 Feb 2026 01:22:38 +0100
Subject: [PATCH] Update body color variable and fix SCSS variable
 interpolation in themes (#2611)

---
 .changeset/fix-gray-theme-variables.md |  5 +++++
 core/scss/_variables.scss              |  2 +-
 core/scss/tabler-themes.scss           | 22 +++++++++++-----------
 3 files changed, 17 insertions(+), 12 deletions(-)
 create mode 100644 .changeset/fix-gray-theme-variables.md

diff --git a/.changeset/fix-gray-theme-variables.md b/.changeset/fix-gray-theme-variables.md
new file mode 100644
index 000000000..1b8923fac
--- /dev/null
+++ b/.changeset/fix-gray-theme-variables.md
@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fixed gray theme custom properties output using SCSS interpolation and updated default `$body-color` to `$gray-500`.
diff --git a/core/scss/_variables.scss b/core/scss/_variables.scss
index ab8ada47e..54459181f 100644
--- a/core/scss/_variables.scss
+++ b/core/scss/_variables.scss
@@ -367,7 +367,7 @@ $negative-spacers: null !default;
 // Body
 
 $body-text-align: null !default;
-$body-color: $gray-900 !default;
+$body-color: $gray-500 !default;
 $body-bg: $white !default;
 
 $body-secondary-color: rgba($body-color, 0.75) !default;
diff --git a/core/scss/tabler-themes.scss b/core/scss/tabler-themes.scss
index f16e16f29..3eabbdd15 100644
--- a/core/scss/tabler-themes.scss
+++ b/core/scss/tabler-themes.scss
@@ -15,17 +15,17 @@
 }
 
 [data-bs-theme-base='gray'] {
-  --#{$prefix}gray-50: $gray-50;
-  --#{$prefix}gray-100: $gray-100;
-  --#{$prefix}gray-200: $gray-200;
-  --#{$prefix}gray-300: $gray-300;
-  --#{$prefix}gray-400: $gray-400;
-  --#{$prefix}gray-500: $gray-500;
-  --#{$prefix}gray-600: $gray-600;
-  --#{$prefix}gray-700: $gray-700;
-  --#{$prefix}gray-800: $gray-800;
-  --#{$prefix}gray-900: $gray-900;
-  --#{$prefix}gray-950: $gray-950;
+  --#{$prefix}gray-50: #{$gray-50};
+  --#{$prefix}gray-100: #{$gray-100};
+  --#{$prefix}gray-200: #{$gray-200};
+  --#{$prefix}gray-300: #{$gray-300};
+  --#{$prefix}gray-400: #{$gray-400};
+  --#{$prefix}gray-500: #{$gray-500};
+  --#{$prefix}gray-600: #{$gray-600};
+  --#{$prefix}gray-700: #{$gray-700};
+  --#{$prefix}gray-800: #{$gray-800};
+  --#{$prefix}gray-900: #{$gray-900};
+  --#{$prefix}gray-950: #{$gray-950};
 }
 
 [data-bs-theme-base='zinc'] {