add hook

Author: alisonjlai

src/react/hooks.ts

@@ -8,6 +8,7 @@ import {
   WorkbookElementData,
   WorkbookSelection,
   WorkbookVariable,
+  PluginThemeColors,
 } from '../types';
 import { deepEqual } from '../utils/deepEqual';
 
@@ -246,3 +247,19 @@ export function useActionEffect(configId: string, effect: () => void) {
     return client.config.registerEffect(configId, effectRef.current);
   }, [client, configId, effect]);
 }
+
+/**
+ * React hook for accessing workbook theme colors with live updates
+ * @returns {PluginThemeColors | undefined} Theme colors from the workbook if available
+ */
+export function useThemeColors(): PluginThemeColors | undefined {
+  const client = usePlugin();
+  const [themeColors, setThemeColors] = useState(client.themeColors);
+
+  useEffect(() => {
+    setThemeColors(client.themeColors);
+    return client.subscribeToThemeColors(setThemeColors);
+  }, [client]);
+
+  return themeColors;
+}