diff --git a/src/client/initialize.ts b/src/client/initialize.ts index a025bd3..bd02a94 100644 --- a/src/client/initialize.ts +++ b/src/client/initialize.ts @@ -3,6 +3,7 @@ import { PluginConfig, PluginInstance, PluginMessageResponse, + PluginThemeColors, WorkbookSelection, WorkbookVariable, } from '../types'; @@ -68,6 +69,10 @@ export function initialize(): PluginInstance { 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(): PluginInstance { 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) { diff --git a/src/react/hooks.ts b/src/react/hooks.ts index 7981771..d6cb746 100644 --- a/src/react/hooks.ts +++ b/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; +} diff --git a/src/types.ts b/src/types.ts index a05c74c..5e048cd 100644 --- a/src/types.ts +++ b/src/types.ts @@ -20,9 +20,21 @@ export interface PluginConfig { 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 { 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