{"record":{"id":"09965bd568e6082a","repo":"appsmithorg/appsmith","slug":"onthemechange-expects-a-function-as-parameter-09965b","errorCode":null,"errorMessage":"onThemeChange expects a function as parameter","messagePattern":"onThemeChange expects a function as parameter","errorType":"validation","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"app/client/src/widgets/wds/WDSCustomWidget/component/customWidgetscript.js","lineNumber":205,"sourceCode":"\n        styleElement.setAttribute(\"data-appsmith-theme\", \"\");\n        styleElement.textContent = event.cssTokens;\n        document.head.appendChild(styleElement);\n      }\n    }\n  });\n\n  if (!window.appsmith) {\n    // Define appsmith global object\n    Object.defineProperty(window, \"appsmith\", {\n      configurable: false,\n      writable: false,\n      value: {\n        mode: \"\",\n        theme: {},\n        onThemeChange: (fn) => {\n          if (typeof fn !== \"function\") {\n            throw new Error(\"onThemeChange expects a function as parameter\");\n          }\n\n          themeSubscribers.push(fn);\n          fn(window.appsmith.theme);\n\n          return () => {\n            // Unsubscribe from theme changes\n            const index = themeSubscribers.indexOf(fn);\n\n            if (index > -1) {\n              themeSubscribers.splice(index, 1);\n            }\n          };\n        },\n        onModelChange: (fn) => {\n          if (typeof fn !== \"function\") {\n            throw new Error(\"onModelChange expects a function as parameter\");\n          }","sourceCodeStart":187,"sourceCodeEnd":223,"githubUrl":"https://github.com/appsmithorg/appsmith/blob/8cd9021c24cdbea1c3c12c966073708e83db60c2/app/client/src/widgets/wds/WDSCustomWidget/component/customWidgetscript.js#L187-L223","documentation":"Thrown by window.appsmith.onThemeChange() in the WDS (Widget Design System) Custom Widget iframe. This WDS variant exposes a theme object (the current Appsmith theme: colors, borderRadius, spacing, typography) and onThemeChange subscribes a callback that is invoked immediately with the current theme and again on every theme switch. Only present in the WDS widget; the legacy CustomWidget does not expose it.","triggerScenarios":"Calling appsmith.onThemeChange(undefined), appsmith.onThemeChange(null), appsmith.onThemeChange('dark'), appsmith.onThemeChange({onChange:fn}), or appsmith.onThemeChange() from the WDS widget's iframe script.","commonSituations":"Porting legacy CustomWidget code (which has no onThemeChange) into a WDS widget and referencing a handler that is not yet defined; passing a config object instead of the handler; forgetting that themeSubscribers stores raw function references for later invocation.","solutions":["Pass a function reference: appsmith.onThemeChange(applyTheme).","Use an inline arrow: appsmith.onThemeChange((theme) => document.documentElement.style.setProperty('--app-bg', theme.colors.backgroundColor)).","Keep the returned unsubscribe function and call it when the iframe is torn down to prevent leaks across re-renders."],"exampleFix":"// before\nappsmith.onThemeChange(handleTheme()); // invokes, passes undefined\n\n// after\nappsmith.onThemeChange(handleTheme); // passes the function reference","handlingStrategy":"type-guard","validationCode":"if (typeof themeHandler !== 'function') {\n  throw new TypeError('onThemeChange expects a function');\n}\nconst off = appsmith.onThemeChange(themeHandler);","typeGuard":"const isCallable = (v) => typeof v === 'function';\n\n// usage\nif (isCallable(applyTheme)) appsmith.onThemeChange(applyTheme);","tryCatchPattern":"try {\n  const off = appsmith.onThemeChange(applyTheme);\n} catch (e) {\n  console.error('onThemeChange registration failed:', e.message);\n}","preventionTips":["Remember onThemeChange is only available in the WDS Custom Widget, not the legacy one.","Pass a function reference; the callback is invoked immediately with the current theme.","Capture the returned unsubscribe function and call it on teardown to avoid leaks.","Keep the handler cheap; it runs on every theme switch."],"tags":["custom-widget","wds","appsmith-api","parameter-validation","javascript"],"backgroundTag":null,"analyzedSha":"8cd9021c24cdbea1c3c12c966073708e83db60c2","analyzedAt":"2026-08-12T22:14:19.293Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}