update useChartStyles to read var change from DOM (#7634)

packages/web/app/src/components/theme/theme-provider.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, useEffect, useMemo, useState } from 'react';
+import { createContext, useContext, useEffect, useLayoutEffect, useMemo, useState } from 'react';
 import { useLocalStorage } from '@/lib/hooks';
 
 const STORAGE_KEY = 'hive-theme';
@@ -55,7 +55,8 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
   }, []);
 
   // Apply theme to document
-  useEffect(() => {
+  // useLayoutEffect ensures DOM is updated before browser paint
+  useLayoutEffect(() => {
     applyTheme(resolvedTheme);
   }, [resolvedTheme]);
 

packages/web/app/src/lib/utils.ts

@@ -1,21 +1,41 @@
+import { useLayoutEffect, useState } from 'react';
 import { clsx, type ClassValue } from 'clsx';
 import { twMerge } from 'tailwind-merge';
+import { useTheme } from '@/components/theme/theme-provider';
 
 // Style-related
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
 
-const darkChartStyles = {
-  backgroundColor: 'transparent',
-  textStyle: { color: '#fff' },
-  legend: {
-    textStyle: { color: '#fff' },
-  },
-};
+function getNeutralColor() {
+  return getComputedStyle(document.documentElement).getPropertyValue('--color-neutral-12').trim();
+}
 
 export function useChartStyles() {
-  return darkChartStyles;
+  const { resolvedTheme } = useTheme();
+  const [textColor, setTextColor] = useState(() => {
+    // Read CSS variable on initial mount
+    return getNeutralColor();
+  });
+
+  useLayoutEffect(() => {
+    // Use requestAnimationFrame to ensure DOM updates are complete
+    const rafId = requestAnimationFrame(() => {
+      const color = getNeutralColor();
+      setTextColor(color);
+    });
+
+    return () => cancelAnimationFrame(rafId);
+  }, [resolvedTheme]);
+
+  return {
+    backgroundColor: 'transparent',
+    textStyle: { color: textColor },
+    legend: {
+      textStyle: { color: textColor },
+    },
+  };
 }
 
 // Strings