From 74a8363ad8de265246b242ac5698d89a01185a99 Mon Sep 17 00:00:00 2001
From: im3dabasia <eshaan.dabasiya@rtcamp.com>
Date: Fri, 27 Dec 2024 17:43:58 +0530
Subject: [PATCH] fix: darkmode for heading component

---
 packages/components/src/heading/hook.ts | 2 +-
 packages/components/src/text/hook.ts    | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/heading/hook.ts b/packages/components/src/heading/hook.ts
index d242afe1fdb2f5..132595d69c4f76 100644
--- a/packages/components/src/heading/hook.ts
+++ b/packages/components/src/heading/hook.ts
@@ -14,7 +14,7 @@ export function useHeading(
 	const {
 		as: asProp,
 		level = 2,
-		color = COLORS.gray[ 900 ],
+		color = COLORS.theme.foreground,
 		isBlock = true,
 		weight = CONFIG.fontWeightHeading as import('react').CSSProperties[ 'fontWeight' ],
 		...otherProps
diff --git a/packages/components/src/text/hook.ts b/packages/components/src/text/hook.ts
index a447b2ce5133be..243b00202460eb 100644
--- a/packages/components/src/text/hook.ts
+++ b/packages/components/src/text/hook.ts
@@ -105,8 +105,8 @@ export default function useText(
 				getOptimalTextShade( optimizeReadabilityFor ) === 'dark';
 
 			sx.optimalTextColor = isOptimalTextColorDark
-				? css( { color: COLORS.gray[ 900 ] } )
-				: css( { color: COLORS.white } );
+				? css( { color: COLORS.theme.foreground } )
+				: css( { color: COLORS.theme.foregroundInverted } );
 		}
 
 		return cx(