[Plugin] Listens to workbook theme color changes

src/client/initialize.ts

@@ -3,6 +3,7 @@ import {
   PluginConfig,
   PluginInstance,
   PluginMessageResponse,
+  PluginThemeColors,
   WorkbookSelection,
   WorkbookVariable,
 } from '../types';
@@ -68,6 +69,10 @@ export function initialize<T = {}>(): PluginInstance<T> {
     effect();
   });
 
+  on('wb:plugin:theme:update', (themeColors: PluginThemeColors) => {
+    pluginConfig.themeColors = themeColors;
+  });
+
   function on(event: string, listener: Function) {
     listeners[event] = listeners[event] || [];
     listeners[event].push(listener);
@@ -106,6 +111,15 @@ export function initialize<T = {}>(): PluginInstance<T> {
       return pluginConfig.screenshot;
     },
 
+    get themeColors() {
+      return pluginConfig.themeColors;
+    },
+
+    onThemeChange(callback: (themeColors: PluginThemeColors) => void) {
+      on('wb:plugin:theme:update', callback);
+      return () => off('wb:plugin:theme:update', callback);
+    },
+
     config: {
       // @ts-ignore
       getKey(key) {

src/react/hooks.ts

@@ -8,6 +8,7 @@ import {
   WorkbookElementData,
   WorkbookSelection,
   WorkbookVariable,
+  PluginThemeColors,
 } from '../types';
 import { deepEqual } from '../utils/deepEqual';
 
@@ -246,3 +247,21 @@ 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(() => {
+    // Initial sync
+    setThemeColors(client.themeColors);
+
+    return client.onThemeChange(setThemeColors);
+  }, [client]);
+
+  return themeColors;
+}

src/types.ts

@@ -20,9 +20,21 @@ export interface PluginConfig<T> {
   id: string;
   config: T;
   screenshot: boolean;
+  themeColors?: PluginThemeColors;
   [key: string]: any;
 }
 
+/**
+ * Theme colors available to plugins
+ * @typedef {object} PluginThemeColors
+ * @property {string} backgroundColor Background color from workbook theme
+ * @property {string} textColor Primary text color from workbook theme
+ */
+export interface PluginThemeColors {
+  backgroundColor: string;
+  textColor: string;
+}
+
 /**
  * @typedef {object} WorkbookVariable
  * @property {string} name Name of control variable within workbook
@@ -189,6 +201,19 @@ export type CustomPluginConfigOptions =
 export interface PluginInstance<T = any> {
   sigmaEnv: 'author' | 'viewer' | 'explorer';
 
+  /**
+   * Theme colors from the workbook
+   * @returns {PluginThemeColors | undefined} Theme colors if available
+   */
+  themeColors?: PluginThemeColors | undefined;
+
+  /**
+   * Listen to theme color changes
+   * @param {Function} callback Function to call when theme colors change
+   * @returns {Function} Unsubscriber function
+   */
+  onThemeChange(callback: (themeColors: PluginThemeColors) => void): () => void;
+
   config: {
     /**
      * Getter for entire Plugin Config