fix: darkmode for heading component

WordPress · Dec 27, 2024 · 74a8363 · 74a8363
1 parent 4868ee3
commit 74a8363
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git 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
@@ -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(