[Catalog] Use light/dark snapshot version

_includes/card.html

@@ -1,3 +1,5 @@
+
+
 <div class= "card link">  
     <div class="card-inner">
       <div class="front">
@@ -6,7 +8,12 @@
         </div>
         <h4 class="pattern-name">{{pattern.name}}</h4>
         <div class="pattern-image-container">
-          <img class= "pattern-image" src="https://raw.githubusercontent.com/layer5labs/meshery-extensions-packages/master/action-assets/design-assets/{{pattern.patternId}}.png" onerror="this.src='/assets/images/patterns/service-mesh.svg'" loading="lazy"/>
+          <img class= "pattern-image pattern-snapshot" 
+          data-snapshot-light="https://raw.githubusercontent.com/layer5labs/meshery-extensions-packages/master/action-assets/design-assets/{{pattern.patternId}}-light.png"
+          data-snapshot-dark="https://raw.githubusercontent.com/layer5labs/meshery-extensions-packages/master/action-assets/design-assets/{{pattern.patternId}}-dark.png"
+          src="https://raw.githubusercontent.com/layer5labs/meshery-extensions-packages/master/action-assets/design-assets/{{pattern.patternId}}-dark.png" 
+          onerror="this.src='/assets/images/patterns/service-mesh.svg'" 
+          loading="lazy"/>
         </div>
         <h6 class="pattern-id">
           <img class="smp"
@@ -15,7 +22,7 @@ <h6 class="pattern-id">
           <span id="patId{{pattern.patternId}}" class="pat">
             {% assign bigPatId = pattern.patternId%}
             {% assign patId = bigPatId | split: "-" %}
-
+   
             {% if patId[2] %}
               MESHERY{{patId[2]}}
             {%else%}
@@ -34,4 +41,5 @@ <h6 class="pattern-id">
   .chip{
     float: left;
   }
-</style>
+</style>
+

_includes/footer.html

@@ -137,6 +137,7 @@ <h2><a {% if column.new_window %}target="_blank" {% endif %}
 
 	function setMode() {
 		document.body.classList.toggle("dark-mode")
+
 		let layer5Logos = document.querySelectorAll("#layer5-logo");
 		let allLogos = document.querySelectorAll("#logo-dark-light");
 		if (document.body.classList.contains("dark-mode")) {
@@ -151,6 +152,10 @@ <h2><a {% if column.new_window %}target="_blank" {% endif %}
 		} else {
 			localStorage.setItem("mode", "light-mode")
 		}
+		document.dispatchEvent(new CustomEvent("themeChange",{
+			detail : {value : localStorage.getItem("mode")},
+			bubbles: true ,
+		}))
 	}
 
 </script>

_includes/header.html

@@ -70,6 +70,12 @@
           allLogos.forEach(e => {
             e.src = body.classList.contains("dark-mode") ? e.dataset.logoForDark : e.dataset.logoForLight;
           });
+
+          // emit the theme event 
+          document.dispatchEvent(new CustomEvent("themeChange",{
+			      detail : {value : localStorage.getItem("mode")},
+			      bubbles: true ,
+		      }))
         });
       </script>
 

_includes/modal.html

@@ -16,7 +16,11 @@ <h6 class="pattern-type"> {{pattern.type | upcase }}</h6>
         {%if pattern.filters.type == "wasm filter" %}
         <img class="image-class" src="https://raw.githubusercontent.com/layer5labs/meshery-extensions-packages/master/action-assets/design-assets/{{pattern.patternId}}.png" onerror="this.src='/assets/images/webassembly_logo.svg'" loading="lazy" onclick="toggleFullScreenImage('{{ pattern.patternId }}')" />
         {%else%}
-        <img class="image-class" src="https://raw.githubusercontent.com/layer5labs/meshery-extensions-packages/master/action-assets/design-assets/{{pattern.patternId}}.png" onerror="this.src='/assets/images/patterns/service-mesh.svg'" loading="lazy" onclick="toggleFullScreenImage('{{ pattern.patternId }}')" />
+        <img class="image-class pattern-snapshot"  
+        data-snapshot-light="https://raw.githubusercontent.com/layer5labs/meshery-extensions-packages/master/action-assets/design-assets/{{pattern.patternId}}-light.png"
+        data-snapshot-dark="https://raw.githubusercontent.com/layer5labs/meshery-extensions-packages/master/action-assets/design-assets/{{pattern.patternId}}-dark.png"
+        src="https://raw.githubusercontent.com/layer5labs/meshery-extensions-packages/master/action-assets/design-assets/{{pattern.patternId}}-dark.png"
+        onerror="this.src='/assets/images/patterns/service-mesh.svg'" loading="lazy" onclick="toggleFullScreenImage('{{ pattern.patternId }}')" />
         {%endif%}
         <h4 class="related-patterns">RELATED PATTERNS</h4>
         {% include related-patterns.html %}

_includes/partials/mini-card.html

@@ -7,7 +7,11 @@
             <small class="modal-pattern-type"> {{pttrn.type}}</small>
         </div>
         <h5 class="modal-pattern-name">{{pttrn.name}}</h5>
-        <img class= "modal-pattern-image" src="https://raw.githubusercontent.com/layer5labs/meshery-extensions-packages/master/action-assets/design-assets/{{pttrn.patternId}}.png" onerror="this.src='/assets/images/patterns/service-mesh.svg'" loading="lazy"/>
+        <img class= "modal-pattern-image pattern-snapshot" 
+        data-snapshot-light="https://raw.githubusercontent.com/layer5labs/meshery-extensions-packages/master/action-assets/design-assets/{{pattern.patternId}}-light.png"
+        data-snapshot-dark="https://raw.githubusercontent.com/layer5labs/meshery-extensions-packages/master/action-assets/design-assets/{{pattern.patternId}}-dark.png"
+        src="https://raw.githubusercontent.com/layer5labs/meshery-extensions-packages/master/action-assets/design-assets/{{pattern.patternId}}-dark.png" 
+        onerror="this.src='/assets/images/patterns/service-mesh.svg'" loading="lazy"/>
         <div>
         <h6 class="modal-pattern-id">
         <img class="modal-smp"

catalog/index.html

@@ -184,4 +184,12 @@ <h2 class="not-found" style="display: none;" id="not-found">
       }
     });
   });
+
+  document.addEventListener("themeChange",(e)=> {
+    // load the snapshot version based on theme 
+    document.querySelectorAll(".pattern-image").forEach(e => {
+      e.src = event.detail.value == "dark-mode" ? e.dataset.snapshotDark : e.dataset.snapshotLight;
+    });
+
+  }) 
 </script>