feat: emitting event to recognize a key hit

Author: Zmyslny

scripts/ColorSchemeSwitchThreeStates/js/switch-script.js

@@ -9,6 +9,8 @@
   };
 
   window.inlineScripts.switchColorScheme = function () {
+    const previousScheme = localStorage.colorScheme;
+
     if (localStorage.colorScheme === "__DARK__") {
 
       setColorScheme("__LIGHT__");
@@ -30,6 +32,15 @@
       localStorage.colorScheme = "__DARK__";
 
     }
+
+    const event = new CustomEvent("colorSchemeChanged", {
+      detail: {
+        previousScheme: previousScheme,
+        currentScheme: localStorage.colorScheme,
+      },
+    });
+
+    document.dispatchEvent(event);
   };
 
   document.addEventListener("keydown", (event) => {

scripts/ColorSchemeSwitchThreeStates/view/hero-icons-tailwind.blade.php

@@ -5,33 +5,37 @@
 @endphp
 
 <script>
-(function() {
+  (function() {
     window.inlineScripts = window.inlineScripts || {};
-    
+
     window.inlineScripts.refreshColorSchemeIcon = function() {
-        const currentScheme = localStorage.getItem('colorScheme');
-        
-        const icons = document.querySelectorAll('[data-colorschemeicon]');
-        icons.forEach(function(icon) {
-            const iconScheme = icon.getAttribute('data-icon');
-            if (iconScheme === currentScheme) {
-                icon.classList.remove('hidden');
-            } else {
-                icon.classList.add('hidden');
-            }
-        });
+      const currentScheme = localStorage.getItem('colorScheme');
+
+      const icons = document.querySelectorAll('[data-colorschemeicon]');
+      icons.forEach(function(icon) {
+        const iconScheme = icon.getAttribute('data-colorschemeicon');
+        if (iconScheme === currentScheme) {
+          icon.classList.remove('hidden');
+        } else {
+          icon.classList.add('hidden');
+        }
+      });
     };
 
     document.addEventListener('DOMContentLoaded', function() {
-        window.inlineScripts.refreshColorSchemeIcon();
+      window.inlineScripts.refreshColorSchemeIcon();
+    });
+
+    document.addEventListener('colorSchemeChanged', function() {
+      window.inlineScripts.refreshColorSchemeIcon();
     });
-})();
+  })();
 </script>
 
 <button
-    {{-- .switchColorScheme() is defined in switch-script.js --}}
-    title="Color scheme switcher"
-    onclick="window.inlineScripts.switchColorScheme(); window.inlineScripts.refreshColorSchemeIcon();"
+        {{-- .switchColorScheme() is defined in switch-script.js --}}
+        title="Color scheme switcher"
+        onclick="window.inlineScripts.switchColorScheme(); window.inlineScripts.refreshColorSchemeIcon();"
 >
 
     <span class="hidden" data-colorschemeicon="{{ SchemeTypeEnum::SYSTEM }}">