diff --git a/README.md b/README.md index 78cc9b5..3581f84 100644 --- a/README.md +++ b/README.md @@ -93,6 +93,21 @@ yarn install }, ``` +or to support a different logo for light and dark themes: + +```json +{ + "id": 45248, + "title": "Title", + "category": "Category", + "route": { + "light": "/library/your_logo_light.svg", + "dark": "/library/your_logo_dark.svg" + }, + "url": "Website" +}, +``` + And create a pull request with your logo 🚀. ## ✌️ Contributing diff --git a/src/app.html b/src/app.html index 6f17e09..dd99150 100644 --- a/src/app.html +++ b/src/app.html @@ -29,7 +29,7 @@
%sveltekit.body%
diff --git a/src/components/svgCard.svelte b/src/components/svgCard.svelte index b60837c..75b1d08 100644 --- a/src/components/svgCard.svelte +++ b/src/components/svgCard.svelte @@ -41,7 +41,16 @@
- {svgInfo.title} + + {svgInfo.title}

{svgInfo.title}

{ - copyToClipboard(svgInfo.route); + const svgHasTheme = typeof svgInfo.route !== 'string'; + + if (!svgHasTheme) { + copyToClipboard( + typeof svgInfo.route === 'string' + ? svgInfo.route + : "Something went wrong. Couldn't copy the SVG." + ); + return; + } + + const dark = document.documentElement.classList.contains('dark'); + + copyToClipboard( + typeof svgInfo.route !== 'string' + ? dark + ? svgInfo.route.dark + : svgInfo.route.light + : svgInfo.route + ); }} class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40" > @@ -62,7 +90,26 @@