Reflect changes of one instance of the element to other instances of …

…the element (if any) on page

In other words, animate their icons as well

test/template-4.html

@@ -6,8 +6,9 @@
   <script src="../theme-switch.js"></script>
   <style>
     #container {
-      display: flex;
-      flex-direction: column;
+      display: grid;
+      gap: 50px;
+      grid-template: 1fr 1fr / 1fr 1fr;
       width: max-content;
     }
 
@@ -19,6 +20,8 @@
 <div id="container">
   <theme-switch id="theme-switch-1"></theme-switch>
   <theme-switch id="theme-switch-2"></theme-switch>
+  <theme-switch id="theme-switch-3"></theme-switch>
+  <theme-switch id="theme-switch-4"></theme-switch>
 </div>
 
 </body>

test/theme-switch.test.js

@@ -43,6 +43,7 @@ const dom = new JSDOM(`
 global.window = dom.window;
 global.document = dom.window.document;
 global.HTMLElement = dom.window.HTMLElement;
+global.CustomEvent = dom.window.CustomEvent;
 global.localStorage = dom.window.localStorage;
 setSystemThemeTo("light");
 
@@ -230,12 +231,13 @@ describe("Screenshot tests", () => {
         await expect(action).rejects.toThrowError("Node is either not visible or not an HTMLElement");
     }, 100_000);
 
-    test(`When there are multiple instances of the element in page, clicking on of them should affect only that element`, async () => {
+    test(`When there are multiple instances of the element in page and one of them is toggled, others should be toggled too`, async () => {
         const screenshot = await takeScreenshot(
             () => { localStorage.setItem("theme", "light"); },
             async (page) => {
-                const element = await page.$("#theme-switch-1");
-                element.click();
+                (await page.$("#theme-switch-2")).click();
+                await page.waitForTimeout(600);
+                (await page.$("#theme-switch-3")).click();
             },
             "template-4.html",
             "#container"

theme-switch.js

@@ -111,8 +111,12 @@ const ICON_INITIAL_STATE_FOR_AUTO = [10, 0, 33, 0];
 const ICON_INITIAL_STATE_FOR_DARK = [10, 0, 20, 1];
 const ICON_INITIAL_STATE_FOR_LIGHT = [5, 1, 33, 1];
 
+let counter = 0; // See https://stackoverflow.com/a/43116254/8583692
+
 class ThemeSwitchElement extends HTMLElement {
     shadowRoot;
+    themeToggleEvent;
+    identifier = counter++;
 
     constructor() {
         super();
@@ -123,7 +127,25 @@ class ThemeSwitchElement extends HTMLElement {
 
         // Add the click listener to the top-most parent (the custom element itself)
         // so the padding etc. on the element be also clickable
-        this.shadowRoot.host.addEventListener("click", this.toggleTheme);
+        this.shadowRoot.host.addEventListener("click", () => {
+            this.toggleTheme();
+            this.dispatchEvent(this.themeToggleEvent);
+        });
+
+        // If another theme switch in page toggled, update my icon too
+        document.addEventListener("themeToggle", (event) => {
+            if (event.detail !== this.identifier) {
+                this.reflectTheme();
+            }
+        });
+
+        // See https://stackoverflow.com/a/53804106/8583692
+        this.themeToggleEvent = new CustomEvent("themeToggle", {
+            detail: this.identifier,
+            bubbles: true,
+            composed: true,
+            cancelable: false
+        });
 
         // Create some CSS to apply to the shadow DOM
         // See https://css-tricks.com/styling-a-web-component/
@@ -148,6 +170,17 @@ class ThemeSwitchElement extends HTMLElement {
         updateTheme();
     }
 
+    reflectTheme() {
+        const theme = getUserThemeSelection();
+        if (theme === THEME_AUTO) {
+            this.animateThemeButtonIconToAuto();
+        } else if (theme === THEME_DARK) {
+            this.animateThemeButtonIconToDark();
+        } else /* if (theme === THEME_LIGHT) */ {
+            this.animateThemeButtonIconToLight();
+        }
+    }
+
     animateThemeButtonIconToLight() {
         this.shadowRoot.getElementById("letter-anim-hide").beginElement();
         this.shadowRoot.getElementById("core-anim-shrink").beginElement();