Add getCurrentTheme wc clientAPI (#3774)

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();

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()
 
 <!-- Generated by documentation.js. Update this documentation by updating the source code. -->

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 = '<button id="getCurrentTheme">getCurrentTheme</button>';
+
+    const templateSpan = document.createElement('template');
+    templateSpan.innerHTML = '<span class="wc-testing-span"></span>';
+
+    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);
+        }
+      }
+    });
+  }
+}

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