fix icons on theme changes

Signed-off-by: vishalvivekm <[email protected]>
meshery · Jan 13, 2025 · 5753829 · 5753829
1 parent 6e43633
commit 5753829
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 3 deletions.
diff --git a/_includes/models/card.html b/_includes/models/card.html
@@ -9,7 +9,7 @@
         </div>
         <h4 class="pattern-name">{{model.name}}</h4>
         <div class="pattern-image-container">
-          <img class= "pattern-image model-image" 
+          <img class= "model-image" 
           data-modelicon-light="{{model.colorIcon}}"
           data-modelicon-dark="{{model.whiteIcon}}"
           src="{{model.colorIcon}}" 

diff --git a/_sass/catalog.scss b/_sass/catalog.scss
@@ -336,7 +336,7 @@ p {
   display: flex;
   justify-content: center;
 }
-.pattern-image {
+.pattern-image, .model-image {
   width: 60%;
   margin-top: 24px;
   object-fit: contain;

diff --git a/collections/_pages/catalog.html b/collections/_pages/catalog.html
@@ -206,6 +206,8 @@ <h2 class="not-found" style="display: none;" id="not-found">
     document.querySelectorAll(".pattern-image").forEach(e => {
       e.src = event.detail.value == "dark-mode" ? e.dataset.snapshotDark : e.dataset.snapshotLight;
     });
-
+    document.querySelectorAll(".model-image").forEach(e => {
+      e.src = event.detail.value == "dark-mode" ? e.dataset.modeliconDark : e.dataset.modeliconLight;
+    })
   }) 
 </script>