Dark mode fixes for package icons

docs/.vitepress/data/packageData.thirdParty.json

@@ -22,6 +22,7 @@
     "name": "hyva-lucide-icons",
     "description": "Implementation of Lucide icon's using Hyvä's svg php viewmodal to render icons for Magento 2 Hyva theme based projects.",
     "icon": "/framework-logos/hyva.svg",
+    "iconDark": "/framework-logos/hyva-dark.svg",
     "shields": [
       {
         "alt": "Latest Stable Version",
@@ -41,6 +42,7 @@
     "name": "eleventy-lucide-icons",
     "description": "Using this plugin, Eleventy projects can incorporate Lucide icons. it makes it simple to use Lucide icons into your themes via shortcodes, improving your website's overall usability and visual appeal.",
     "icon": "/framework-logos/11ty.svg",
+    "iconClass": "package-icon-invert",
     "shields": [
       {
         "alt": "Latest Stable Version",

docs/.vitepress/theme/components/packages/PackageListItem.vue

@@ -13,7 +13,8 @@ const props = defineProps<{
   <article class="package">
     <header class="package-header">
       <div class="package-icon-well">
-        <img :src="packageData.icon" alt="" class="package-icon" />
+        <img :src="packageData.icon" alt="" class="package-icon" :class="{[packageData.iconClass]: true, light: packageData.iconDark}" />
+        <img v-if="packageData.iconDark" :src="packageData.iconDark" alt="" class="package-icon dark" :class="packageData.iconClass" />
       </div>
       <div class="package-title">
         <h2 class="title">{{ props.packageData.name }}</h2>
@@ -97,4 +98,13 @@ h2.title {
   flex-direction: row;
   gap: 12px;
 }
+html.dark .package-icon-invert {
+  filter: invert(1) hue-rotate(180deg);
+}
+html.dark .package-icon.light {
+  display: none;
+}
+html:not(.dark) .package-icon.dark {
+  display: none;
+}
 </style>

docs/.vitepress/theme/types.ts

@@ -28,6 +28,7 @@ export interface PackageItem {
   name: string
   description: string
   icon: string
+  iconDark: string
   shields: Shield[]
   source: string
   documentation: string

docs/public/framework-logos/hyva-dark.svg

@@ -0,0 +1,4 @@
+<svg width="340" height="340" viewBox="0 0 340 340" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M192.131 82.458L207.41 36.8783H260.403L245.043 82.458H192.131Z" fill="#0A23B9"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M128.026 144.716C142.966 132.84 161.165 125.37 181.659 125.37C223.609 125.37 264.409 152.196 264.409 220.953V306H210.776V220.953C210.776 185.516 193.929 172.107 170.933 172.107C151.969 172.107 138.181 183.026 130.516 194.517V306H76.692V85.336H44L61.2077 34H128.026V144.716ZM242.988 79.567L256.407 39.7565H209.485L196.132 79.567H242.988ZM205.338 34H264.409L247.112 85.336H188.13L205.338 34Z" fill="#14FFAF"/>
+</svg>

docs/public/framework-logos/hyva.svg

@@ -1,6 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg width="30" height="30" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <rect width="400" height="400" fill="#F6F7FF"/>
-  <path d="M222.131 112.458L237.41 66.8783H290.403L275.043 112.458H222.131Z" fill="#14FFAF"/>
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M158.026 174.716C172.966 162.84 191.165 155.37 211.659 155.37C253.609 155.37 294.409 182.196 294.409 250.953V336H240.776V250.953C240.776 215.516 223.929 202.107 200.933 202.107C181.969 202.107 168.181 213.026 160.516 224.517V336H106.692V115.336H74L91.2077 64H158.026V174.716ZM272.988 109.567L286.407 69.7565H239.485L226.132 109.567H272.988ZM235.338 64H294.409L277.112 115.336H218.13L235.338 64Z" fill="#0A23B9"/>
+<svg width="340" height="340" viewBox="0 0 340 340" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M192.131 82.458L207.41 36.8783H260.403L245.043 82.458H192.131Z" fill="#14FFAF"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M128.026 144.716C142.966 132.84 161.165 125.37 181.659 125.37C223.609 125.37 264.409 152.196 264.409 220.953V306H210.776V220.953C210.776 185.516 193.929 172.107 170.933 172.107C151.969 172.107 138.181 183.026 130.516 194.517V306H76.692V85.336H44L61.2077 34H128.026V144.716ZM242.988 79.567L256.407 39.7565H209.485L196.132 79.567H242.988ZM205.338 34H264.409L247.112 85.336H188.13L205.338 34Z" fill="#0A23B9"/>
 </svg>