From 1db850ffaca585c4b2e4fe246dafb9c3bcf736ca Mon Sep 17 00:00:00 2001 From: Karsa Date: Tue, 23 May 2023 13:09:32 +0200 Subject: [PATCH] Dark mode fixes for package icons --- docs/.vitepress/data/packageData.thirdParty.json | 2 ++ .../theme/components/packages/PackageListItem.vue | 12 +++++++++++- docs/.vitepress/theme/types.ts | 1 + docs/public/framework-logos/11ty.svg | 5 ++--- docs/public/framework-logos/hyva-dark.svg | 4 ++++ docs/public/framework-logos/hyva.svg | 8 +++----- 6 files changed, 23 insertions(+), 9 deletions(-) create mode 100644 docs/public/framework-logos/hyva-dark.svg diff --git a/docs/.vitepress/data/packageData.thirdParty.json b/docs/.vitepress/data/packageData.thirdParty.json index 92fa1303f..642b432a7 100644 --- a/docs/.vitepress/data/packageData.thirdParty.json +++ b/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", diff --git a/docs/.vitepress/theme/components/packages/PackageListItem.vue b/docs/.vitepress/theme/components/packages/PackageListItem.vue index bb1681c9f..f314aff6c 100644 --- a/docs/.vitepress/theme/components/packages/PackageListItem.vue +++ b/docs/.vitepress/theme/components/packages/PackageListItem.vue @@ -13,7 +13,8 @@ const props = defineProps<{
- + +

{{ props.packageData.name }}

@@ -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; +} diff --git a/docs/.vitepress/theme/types.ts b/docs/.vitepress/theme/types.ts index 2b6085bd5..34e60c6d9 100644 --- a/docs/.vitepress/theme/types.ts +++ b/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 diff --git a/docs/public/framework-logos/11ty.svg b/docs/public/framework-logos/11ty.svg index 6d580c6d6..e15380c21 100644 --- a/docs/public/framework-logos/11ty.svg +++ b/docs/public/framework-logos/11ty.svg @@ -1,4 +1,3 @@ - - + + diff --git a/docs/public/framework-logos/hyva-dark.svg b/docs/public/framework-logos/hyva-dark.svg new file mode 100644 index 000000000..cff7691d4 --- /dev/null +++ b/docs/public/framework-logos/hyva-dark.svg @@ -0,0 +1,4 @@ + + + + diff --git a/docs/public/framework-logos/hyva.svg b/docs/public/framework-logos/hyva.svg index b12013454..75fe91b51 100644 --- a/docs/public/framework-logos/hyva.svg +++ b/docs/public/framework-logos/hyva.svg @@ -1,6 +1,4 @@ - - - - - + + +