Enhance theme support: update CSS variables for dark and light themes, improve modal styles, and ensure SVGs use currentColor for theme compatibility.

src/App.svelte

@@ -2,6 +2,7 @@
   import { onMount } from 'svelte';
   import Grid from './components/Grid.svelte';
   import List from './components/List.svelte';
+  import Header from './components/Header.svelte';
 
   let viewMode = 'grid'; // 'grid' or 'list'
   let searchQuery = '';
@@ -51,7 +52,9 @@
     });
   });
 
-  $: {
+  // Make sure to apply theme whenever it changes
+  $: if (theme) {
+    console.log('[Theme] Theme changed:', theme);
     applyTheme();
   }
 
@@ -139,14 +142,20 @@
     if (theme === 'system') {
       effectiveTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
     }
+    // Apply theme both ways for compatibility
     document.documentElement.setAttribute('data-theme', effectiveTheme);
+    document.documentElement.className = effectiveTheme; // Add class-based theming
+    console.log('[Theme] Applied theme:', effectiveTheme);
   }
 
   function setTheme(newTheme) {
-    theme = newTheme;
-    localStorage.setItem('theme', newTheme);
-    console.log('[theme] setTheme:', newTheme);
-    applyTheme();
+    if (newTheme === 'light' || newTheme === 'dark' || newTheme === 'system') {
+      theme = newTheme;
+      localStorage.setItem('theme', newTheme);
+      console.log('[Theme] setTheme:', newTheme);
+      // Apply theme immediately after setting
+      setTimeout(() => applyTheme(), 0);
+    }
   }
 
   function toggleTag(tag) {

src/components/Actions.svelte

@@ -1,6 +1,5 @@
 <script>
   export let logo;
-  export let onCopy;
   export let onDownload;
 
   // Download menu state

src/components/InlineSvg.svelte

@@ -11,8 +11,17 @@
     const res = await fetch(path);
     let text = await res.text();
     if (!color) {
-      // No user-selected color, render as-is (SVG uses fill="currentColor")
-      svgHtml = text;
+      // No user-selected color, add currentColor to ensure theme colors are applied
+      const parser = new DOMParser();
+      const doc = parser.parseFromString(text, "image/svg+xml");
+      const svg = doc.documentElement;
+
+      // Set currentColor on SVG element if no fill is specified
+      if (!svg.hasAttribute("fill")) {
+        svg.setAttribute("fill", "currentColor");
+      }
+
+      svgHtml = doc.documentElement.outerHTML;
       return;
     }
     // Parse and update color only if user selected

src/components/Preview.svelte

@@ -140,7 +140,7 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
 
   :global(.modal-content) {
     background: var(--color-card);
-    color: var(--text-color);
+    color: var(--color-text);
     border-radius: 8px;
     padding: 1rem;
     max-width: 500px;
@@ -167,7 +167,7 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
     border: none;
     font-size: 1.5rem;
     cursor: pointer;
-    color: var(--text-color, #222);
+    color: var(--color-text);
     transition: color 0.2s;
   }