fix: issue7026 RELEASE (#702)

## Related Issues

Fixes descope/etc#7026

packages/sdks/web-component/src/lib/descope-wc/BaseDescopeWc.ts

@@ -824,6 +824,10 @@ class BaseDescopeWc extends HTMLElement {
       });
 
       this.#debugState.update({ isDebug: this.debug });
+
+      if (attrName === 'theme') {
+        this.#applyTheme();
+      }
     }
   }
 }

packages/sdks/web-component/test/descope-wc.test.ts

@@ -179,6 +179,37 @@ describe('web-component', () => {
     pageContent = '';
   });
 
+  it('should switch theme on the fly', async () => {
+    startMock.mockReturnValue(generateSdkResponse());
+
+    pageContent = '<button id="email">Button</button><span>It works!</span>';
+
+    const DescopeUI = {
+      componentsThemeManager: { currentThemeName: undefined },
+    };
+    globalThis.DescopeUI = DescopeUI;
+
+    document.body.innerHTML = `<h1>Custom element test</h1> <descope-wc theme="light" flow-id="otpSignInEmail" project-id="1"></descope-wc>`;
+
+    await waitFor(() => screen.getByShadowText('Button'), {
+      timeout: WAIT_TIMEOUT,
+    });
+
+    const wc = document.querySelector('descope-wc');
+    wc.setAttribute('theme', 'dark');
+
+    const rootEle = wc.shadowRoot.querySelector('#wc-root');
+
+    await waitFor(
+      () =>
+        expect(DescopeUI.componentsThemeManager.currentThemeName).toBe('dark'),
+      { timeout: 3000 },
+    );
+    await waitFor(() => expect(rootEle).toHaveAttribute('data-theme', 'dark'), {
+      timeout: 3000,
+    });
+  }, 5000);
+
   it('should clear the flow query params after render', async () => {
     window.location.search = `?${URL_RUN_IDS_PARAM_NAME}=0_1&code=123456`;
     nextMock.mockReturnValue(generateSdkResponse({}));