diff --git a/core/src/core-api/ux.js b/core/src/core-api/ux.js
index 0d639e7d96..0a4617ac44 100644
--- a/core/src/core-api/ux.js
+++ b/core/src/core-api/ux.js
@@ -176,6 +176,18 @@ class LuigiUX {
getDirtyStatus() {
return Luigi.getDirtyStatus();
}
+
+ /**
+ * Returns the current active theme. Falls back to **defaultTheme** if one wasn't explicitly specified before.
+ * @memberof UX
+ * @returns {string} theme id
+ * @since NEXTRELEASE
+ * @example
+ * Luigi.ux().getCurrentTheme()
+ */
+ getCurrentTheme() {
+ return Luigi.theming().getCurrentTheme();
+ }
}
export const ux = new LuigiUX();
diff --git a/docs/luigi-core-api.md b/docs/luigi-core-api.md
index 5b79eb4a0e..b1f97620d2 100644
--- a/docs/luigi-core-api.md
+++ b/docs/luigi-core-api.md
@@ -1066,6 +1066,22 @@ Returns **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/
- **since**: 2.1.0
+#### getCurrentTheme
+
+Retrieves the current active theme. Falls back to **defaultTheme** if none explicitly specified before.
+
+##### Examples
+
+```javascript
+Luigi.ux().getCurrentTheme()
+```
+
+Returns **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** theme id
+
+**Meta**
+
+- **since**: NEXTRELEASE
+
## Luigi.globalSearch()
diff --git a/test/e2e-js-test-application/public/examples/microfrontends/getCurrentThemeWC.js b/test/e2e-js-test-application/public/examples/microfrontends/getCurrentThemeWC.js
new file mode 100644
index 0000000000..4d06ed69bb
--- /dev/null
+++ b/test/e2e-js-test-application/public/examples/microfrontends/getCurrentThemeWC.js
@@ -0,0 +1,30 @@
+export default class ExampleWC extends HTMLElement {
+ constructor() {
+ super();
+ const getCurrentThemeBtn = document.createElement('template');
+ getCurrentThemeBtn.innerHTML = '';
+
+ const templateSpan = document.createElement('template');
+ templateSpan.innerHTML = '';
+
+ this._shadowRoot = this.attachShadow({
+ mode: 'open',
+ delegatesFocus: false
+ });
+ this._shadowRoot.appendChild(getCurrentThemeBtn.content.cloneNode(true));
+ this._shadowRoot.appendChild(templateSpan.content.cloneNode(true));
+
+ this.$getCurrentThemeBtn = this._shadowRoot.querySelector('#getCurrentTheme');
+ this.$getCurrentThemeBtn.addEventListener('click', async () => {
+ if (this.LuigiClient) {
+ try {
+ this._shadowRoot.querySelector('span').innerHTML = JSON.stringify(
+ this.LuigiClient.uxManager().getCurrentTheme()
+ );
+ } catch (err) {
+ console.log(err);
+ }
+ }
+ });
+ }
+}
diff --git a/test/e2e-test-application/cypress/e2e/tests/0-js-test-app/js-test-app-theming.cy.js b/test/e2e-test-application/cypress/e2e/tests/0-js-test-app/js-test-app-theming.cy.js
index 16334700ff..c0103f30e8 100644
--- a/test/e2e-test-application/cypress/e2e/tests/0-js-test-app/js-test-app-theming.cy.js
+++ b/test/e2e-test-application/cypress/e2e/tests/0-js-test-app/js-test-app-theming.cy.js
@@ -75,6 +75,33 @@ describe('JS-TEST-APP 2', () => {
);
});
});
+
+ it('Get current theme for a webcomponent', () => {
+ newConfig.navigation.nodes[0].children.push({
+ pathSegment: 'wc',
+ label: 'WC',
+ viewUrl: '/examples/microfrontends/getCurrentThemeWC.js',
+ webcomponent: true
+ });
+ cy.visitTestApp('/home/wc', newConfig);
+ cy.get(
+ 'luigi-wc-687474703a2f2f6c6f63616c686f73743a343530302f6578616d706c65732f6d6963726f66726f6e74656e64732f67657443757272656e745468656d6557432e6a73'
+ )
+ .shadow()
+ .contains('light')
+ .should('not.exist');
+ cy.get(
+ 'luigi-wc-687474703a2f2f6c6f63616c686f73743a343530302f6578616d706c65732f6d6963726f66726f6e74656e64732f67657443757272656e745468656d6557432e6a73'
+ )
+ .shadow()
+ .contains('getCurrentTheme')
+ .click();
+ cy.get(
+ 'luigi-wc-687474703a2f2f6c6f63616c686f73743a343530302f6578616d706c65732f6d6963726f66726f6e74656e64732f67657443757272656e745468656d6557432e6a73'
+ )
+ .shadow()
+ .contains('light');
+ });
});
describe('semiCollapsible settings of Left Side Navigation', () => {