From 1d25fe0f4aa2ff3c631ff79be15c9ba7aa2e3f37 Mon Sep 17 00:00:00 2001
From: ppazosp <pablopazosp3@gmail.com>
Date: Sun, 29 Mar 2026 21:15:48 +0200
Subject: [PATCH] feat(web_core): expose theme from ComponentContext

Closes #976
---
 .../src/v0_9/rendering/component-context.test.ts | 16 ++++++++++++++++
 .../src/v0_9/rendering/component-context.ts      |  3 +++
 2 files changed, 19 insertions(+)

diff --git a/renderers/web_core/src/v0_9/rendering/component-context.test.ts b/renderers/web_core/src/v0_9/rendering/component-context.test.ts
index 8dfedd53e..767e99563 100644
--- a/renderers/web_core/src/v0_9/rendering/component-context.test.ts
+++ b/renderers/web_core/src/v0_9/rendering/component-context.test.ts
@@ -61,4 +61,20 @@ describe('ComponentContext', () => {
     const context = new ComponentContext(mockSurface, componentId, '/foo/bar');
     assert.strictEqual(context.dataContext.path, '/foo/bar');
   });
+
+  it('exposes theme from surface', () => {
+    const theme = {primaryColor: '#FF5733'};
+    const themedSurface = new SurfaceModel('themed', {} as any, theme);
+    const comp = new ComponentModel('c1', 'Text', {});
+    themedSurface.componentsModel.addComponent(comp);
+
+    const context = new ComponentContext(themedSurface, 'c1');
+    assert.deepStrictEqual(context.theme, theme);
+    assert.strictEqual(context.theme.primaryColor, '#FF5733');
+  });
+
+  it('exposes empty theme when none provided', () => {
+    const context = new ComponentContext(mockSurface, componentId);
+    assert.deepStrictEqual(context.theme, {});
+  });
 });
diff --git a/renderers/web_core/src/v0_9/rendering/component-context.ts b/renderers/web_core/src/v0_9/rendering/component-context.ts
index 910ee2345..8866aae1b 100644
--- a/renderers/web_core/src/v0_9/rendering/component-context.ts
+++ b/renderers/web_core/src/v0_9/rendering/component-context.ts
@@ -34,6 +34,8 @@ export class ComponentContext {
   readonly dataContext: DataContext;
   /** The collection of all component models for the current surface, allowing lookups by ID. */
   readonly surfaceComponents: SurfaceComponentsModel;
+  /** The theme configuration for the surface this component belongs to. */
+  readonly theme: any;
 
   /**
    * Creates a new component context.
@@ -53,6 +55,7 @@ export class ComponentContext {
     }
     this.componentModel = model;
     this.surfaceComponents = surface.componentsModel;
+    this.theme = surface.theme;
 
     this.dataContext = new DataContext(surface, dataModelBasePath);
     this._actionDispatcher = action =>