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', () => {