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

public/global.css

@@ -15,7 +15,7 @@
   --color-accent-hover: var(--primary-color-hover);
 }
 
-/* Dark theme overrides */
+/* Dark theme overrides - using both media query and class-based approach */
 @media (prefers-color-scheme: dark) {
   :root {
     --color-card: #23272e;
@@ -26,6 +26,24 @@
   }
 }
 
+/* Class-based theme overrides for explicit theme switching */
+:root.dark, [data-theme="dark"] {
+  --color-card: #23272e;
+  --background-color: #181a20;
+  --color-text: #f5f6fa;
+  --color-border: #333842;
+  --color-accent: #4f8cff;
+}
+
+:root.light, [data-theme="light"] {
+  --color-bg: #fff;
+  --color-card: #f8f8f8;
+  --background-color: #f8f9fa;
+  --color-text: #333333;
+  --color-border: #ddd;
+  --color-accent: #4f8cff;
+}
+
 * {
   box-sizing: border-box;
   margin: 0;
@@ -300,6 +318,103 @@ div.logo-image img {
   max-height: 100%;
   display: block;
   object-fit: contain;
+  color: var(--color-text);
+}
+
+/* Modal styles */
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  background: var(--color-card);
+  color: var(--color-text) !important;
+  border-radius: 8px;
+  padding: 1rem;
+  max-width: 500px;
+  width: 90%;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+  border: 1px solid var(--color-border);
+  transition: background 0.2s, color 0.2s;
+}
+
+.modal-content * {
+  color: var(--color-text);
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+  color: var(--color-text);
+}
+
+.modal-header h2 {
+  margin: 0;
+  font-size: 1.5rem;
+  color: var(--color-text);
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  cursor: pointer;
+  color: var(--color-text);
+  transition: color 0.2s;
+}
+
+.close-btn:hover {
+  color: #f44336;
+}
+
+.modal-body {
+  color: var(--color-text);
+}
+
+.preview-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  background-color: var(--color-card);
+  color: var(--color-text);
+  margin-bottom: 1rem;
+  border-radius: 4px;
+  overflow: hidden;
+  border: 1px solid var(--color-border);
+}
+
+.preview-container img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+.logo-details {
+  margin-top: 1rem;
+  color: var(--color-text);
+}
+
+.logo-details p {
+  margin: 0.5rem 0;
+  font-size: 0.9rem;
+  color: var(--color-text);
+}
+
+.logo-details strong,
+.logo-details span {
+  color: var(--color-text);
 }
 
 /* Grid specific */

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;
   }