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}
{
- 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 @@