add listener, update types

Author: alisonjlai

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;
+    },
+
+    subscribeToThemeColors(callback: (themeColors: PluginThemeColors) => void) {
+      on('wb:plugin:theme:update', callback);
+      return () => off('wb:plugin:theme:update', callback);
+    },
+
     config: {
       // @ts-ignore
       getKey(key) {

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,21 @@ 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;
+
+  /**
+   * Subscribe to theme color changes
+   * @param {Function} callback Function to call when theme colors change
+   * @returns {Function} Unsubscriber function
+   */
+  subscribeToThemeColors(
+    callback: (themeColors: PluginThemeColors) => void,
+  ): () => void;
+
   config: {
     /**
      * Getter for entire Plugin Config