From e5482c549e86a8391c5793046dd0d19a21486783 Mon Sep 17 00:00:00 2001
From: sHa <sha@shadoll.dev>
Date: Tue, 29 Apr 2025 18:02:07 +0300
Subject: [PATCH] Enhance theme handling and color selection for logos; add
 utility functions for theme-based color retrieval and improve debug logging
 across components.

---
 public/global.css                 |  1 +
 src/App.svelte                    |  6 +++++
 src/components/InlineSvg.svelte   | 14 +++++------
 src/components/LogoActions.svelte | 26 ++------------------
 src/components/LogoGrid.svelte    | 35 ++++++++++++++++++++------
 src/components/LogoList.svelte    | 41 ++++++++++++++++++++++++++++++-
 src/components/LogoModal.svelte   | 37 ++++++++++++++++++++++------
 src/utils/colorTheme.js           | 19 ++++++++++++++
 8 files changed, 131 insertions(+), 48 deletions(-)
 create mode 100644 src/utils/colorTheme.js

diff --git a/public/global.css b/public/global.css
index e5ad6ef..9011d33 100644
--- a/public/global.css
+++ b/public/global.css
@@ -73,6 +73,7 @@ button:hover {
   font-size: 0.95em;
   border-right: 1px solid var(--color-border, #ddd);
   transition: background 0.2s, color 0.2s;
+  text-wrap: nowrap;
 }
 
 .copy-btn:last-child,
diff --git a/src/App.svelte b/src/App.svelte
index 46989de..b574429 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -71,6 +71,11 @@
     return matchesSearch && matchesTags;
   });
 
+  // Compute the effective theme for children
+  $: effectiveTheme = theme === 'system'
+    ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+    : theme;
+
   function setGridView() {
     console.log('Setting view mode to: grid');
     viewMode = 'grid';
@@ -257,6 +262,7 @@
         logos={filteredLogos}
         onCopy={copyUrl}
         onDownload={downloadLogo}
+        theme={effectiveTheme}
       />
     {:else}
       <LogoList
diff --git a/src/components/InlineSvg.svelte b/src/components/InlineSvg.svelte
index 327e854..796871c 100644
--- a/src/components/InlineSvg.svelte
+++ b/src/components/InlineSvg.svelte
@@ -3,6 +3,7 @@
   export let path;
   export let color;
   export let colorConfig = { target: 'path', attribute: 'fill' };
+  export let alt;
 
   let svgHtml = '';
 
@@ -54,18 +55,17 @@
         // Legacy: force a single attribute
         el.setAttribute(colorConfig.attribute, color);
       } else {
-        // Only set fill if no stroke attribute exists, and vice versa
-        const hasFill = el.hasAttribute('fill');
-        const hasStroke = el.hasAttribute('stroke');
-        if (hasFill && !hasStroke && el.getAttribute('fill') !== 'none') {
+        // Always override fill and stroke unless they are 'none'
+        if (el.hasAttribute('fill') && el.getAttribute('fill') !== 'none') {
           el.setAttribute('fill', color);
-        } else if (hasStroke && !hasFill && el.getAttribute('stroke') !== 'none') {
+        }
+        if (el.hasAttribute('stroke') && el.getAttribute('stroke') !== 'none') {
           el.setAttribute('stroke', color);
-        } else if (!hasFill && !hasStroke) {
+        }
+        if (!el.hasAttribute('fill') && !el.hasAttribute('stroke')) {
           // If neither, prefer fill
           el.setAttribute('fill', color);
         }
-        // If both fill and stroke exist, do not override either
       }
     });
     svgHtml = doc.documentElement.outerHTML;
diff --git a/src/components/LogoActions.svelte b/src/components/LogoActions.svelte
index 10056bb..0f4337a 100644
--- a/src/components/LogoActions.svelte
+++ b/src/components/LogoActions.svelte
@@ -1,5 +1,6 @@
 <script>
   export let logo;
+  export let onCopy;
   export let onDownload;
 
   // Download menu state
@@ -209,7 +210,7 @@
 
   function handleDownloadJpgClick(e) {
     e.stopPropagation();
-    console.log('Download JPG clicked', logo);
+    // ...existing code...
     try {
       downloadJpg(logo);
     } catch (err) {
@@ -284,36 +285,13 @@
     margin-right: 0.5em;
   }
   .copy-btn {
-    background: var(--secondary-color, #2c3e50);
-    color: #fff;
-    font-weight: 500;
-    letter-spacing: 0.02em;
     min-width: 4em;
     border-radius: 6px 0 0 6px;
-    margin: 0;
-    padding: 0.4em 1em;
-    font-size: 0.95em;
     border: none;
-    transition: background 0.2s, color 0.2s;
-  }
-  .copy-btn:focus,
-  .copy-btn:hover {
-    background: #222;
-    color: #fff;
-    outline: none;
   }
   .download-btn {
-    background: #27ae60;
-    color: #fff;
-    font-weight: 500;
-    letter-spacing: 0.02em;
-    min-width: 4em;
     border-radius: 6px 0 0 6px;
-    margin: 0;
-    padding: 0.4em 1em;
-    font-size: 0.95em;
     border: none;
-    transition: background 0.2s, color 0.2s;
   }
   .download-btn:focus,
   .download-btn:hover {
diff --git a/src/components/LogoGrid.svelte b/src/components/LogoGrid.svelte
index ea613e1..e5a425c 100644
--- a/src/components/LogoGrid.svelte
+++ b/src/components/LogoGrid.svelte
@@ -2,7 +2,8 @@
   import LogoModal from './LogoModal.svelte';
   import LogoActions from './LogoActions.svelte';
   import InlineSvg from './InlineSvg.svelte';
-  import { onMount } from 'svelte';
+  import { onMount, onDestroy } from 'svelte';
+  import { getDefaultLogoColor, getThemeColor } from '../utils/colorTheme.js';
 
   export let logos = [];
   export let onCopy;
@@ -24,6 +25,22 @@
     return logo.format && logo.format.toLowerCase() === 'svg';
   }
 
+  export let theme;
+$: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
+
+  // Improved debug logging for color and theme for each logo
+  $: {
+    if (logos && logos.length) {
+      logos.forEach(logo => {
+        if (logo.colors) {
+          const themeColor = getDefaultLogoColor(logo.colors, theme);
+          const fallbackColor = getThemeColor(logo.colors, theme);
+          const activeColor = logo._activeColor || themeColor;
+        }
+      });
+    }
+  }
+
   // Inline SVG logic for color switching
   let svgCache = {};
 
@@ -36,7 +53,7 @@
   }
 </script>
 
-<LogoModal show={showModal} logo={selectedLogo} on:close={closeModal} />
+<LogoModal show={showModal} logo={selectedLogo} theme={theme} on:close={closeModal} />
 
 <div class="logo-grid">
   {#each logos as logo}
@@ -50,12 +67,14 @@
         style="cursor:pointer;"
       >
         {#if isSvgLogo(logo)}
-          <InlineSvg
-            path={logo.path}
-            color={logo.colors ? (logo._activeColor || logo.colors[0].value) : undefined}
-            colorConfig={logo.colors ? logo.colorConfig : undefined}
-            alt={logo.name}
-          />
+          {#key theme + (logo._activeColor || '')}
+            <InlineSvg
+              path={logo.path}
+              color={logo.colors ? (logo._activeColor || getLogoThemeColor(logo)) : undefined}
+              colorConfig={logo.colors ? logo.colorConfig : undefined}
+              alt={logo.name}
+            />
+          {/key}
         {:else}
           <img src={logo.path} alt={logo.name} />
         {/if}
diff --git a/src/components/LogoList.svelte b/src/components/LogoList.svelte
index 89a8fe0..8c59cbd 100644
--- a/src/components/LogoList.svelte
+++ b/src/components/LogoList.svelte
@@ -2,6 +2,8 @@
   import LogoModal from './LogoModal.svelte';
   import LogoActions from './LogoActions.svelte';
   import InlineSvg from './InlineSvg.svelte';
+  import { getThemeColor, getDefaultLogoColor } from '../utils/colorTheme.js';
+  import { onMount, onDestroy } from 'svelte';
 
   export let logos = [];
   export let onCopy;
@@ -10,6 +12,8 @@
   let showModal = false;
   let selectedLogo = null;
 
+  let theme = getTheme();
+
   function openPreview(logo) {
     selectedLogo = logo;
     showModal = true;
@@ -23,6 +27,41 @@
     return logo.format && logo.format.toLowerCase() === 'svg';
   }
 
+  function getTheme() {
+    if (typeof window !== 'undefined' && window.matchMedia) {
+      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    }
+    return 'light';
+  }
+
+  function handleThemeChange(e) {
+    theme = e.matches ? 'dark' : 'light';
+  }
+
+  onMount(() => {
+    const mql = window.matchMedia('(prefers-color-scheme: dark)');
+    mql.addEventListener('change', handleThemeChange);
+  });
+
+  onDestroy(() => {
+    const mql = window.matchMedia('(prefers-color-scheme: dark)');
+    mql.removeEventListener('change', handleThemeChange);
+  });
+
+  $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
+
+  // Debug logging for color and theme
+  $: {
+    if (logos && logos.length) {
+      logos.forEach(logo => {
+        if (logo.colors) {
+          const themeColor = getDefaultLogoColor(logo.colors, theme);
+          const activeColor = logo._activeColor || themeColor;
+          console.log('[LogoList] Logo:', logo.name, '| Theme:', theme, '| Theme color:', themeColor, '| Active color:', activeColor);
+        }
+      });
+    }
+  }
 </script>
 
 <LogoModal show={showModal} logo={selectedLogo} on:close={closeModal} />
@@ -41,7 +80,7 @@
         {#if isSvgLogo(logo)}
           <InlineSvg
             path={logo.path}
-            color={logo.colors ? (logo._activeColor || logo.colors[0].value) : undefined}
+            color={logo.colors ? (logo._activeColor || getLogoThemeColor(logo)) : undefined}
             colorConfig={logo.colors ? logo.colorConfig : undefined}
             alt={logo.name}
           />
diff --git a/src/components/LogoModal.svelte b/src/components/LogoModal.svelte
index 60560a0..2e9ef32 100644
--- a/src/components/LogoModal.svelte
+++ b/src/components/LogoModal.svelte
@@ -1,6 +1,7 @@
 <script>
   import { onMount, onDestroy, createEventDispatcher } from 'svelte';
   import InlineSvg from './InlineSvg.svelte';
+  import { getDefaultLogoColor, getThemeColor } from '../utils/colorTheme.js';
 
   export let show = false;
   export let logo = null;
@@ -21,6 +22,19 @@
     return logo && logo.format && logo.format.toLowerCase() === 'svg';
   }
 
+  // Always use $theme directly, do not cache in a function
+  export let theme;
+$: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
+
+  // Improved debug logging for color and theme
+  $: {
+    if (logo && logo.colors) {
+      const themeColor = getDefaultLogoColor(logo.colors, theme);
+      const fallbackColor = getThemeColor(logo.colors, theme);
+      const activeColor = logo._activeColor || themeColor;
+    }
+  }
+
   onMount(() => {
     document.addEventListener('keydown', handleKeydown);
   });
@@ -30,11 +44,12 @@
   });
 </script>
 
-{#if show && logo}
-  <div class="modal-backdrop"
-    role="dialog"
-    aria-modal="true"
-  >
+<div class="modal-backdrop"
+  style="display: {show && logo ? 'flex' : 'none'}"
+  role="dialog"
+  aria-modal="true"
+>
+  {#if logo}
     <div class="modal-content">
       <div class="modal-header">
         <h2>{logo.name}</h2>
@@ -52,7 +67,7 @@
           {#if isSvgLogo(logo)}
             <InlineSvg
               path={logo.path}
-              color={logo.colors ? (logo._activeColor || logo.colors[0].value) : undefined}
+              color={logo.colors ? (logo._activeColor || getLogoThemeColor(logo)) : undefined}
               colorConfig={logo.colors ? logo.colorConfig : undefined}
               alt={logo.name}
             />
@@ -88,8 +103,8 @@
         </div>
       </div>
     </div>
-  </div>
-{/if}
+  {/if}
+</div>
 
 <style>
   :global(.modal-backdrop) {
@@ -134,6 +149,12 @@
     border: none;
     font-size: 1.5rem;
     cursor: pointer;
+    color: var(--color-text, #222);
+    transition: color 0.2s;
+  }
+
+  .close-btn:hover {
+    color: var(--color-accent, #4f8cff);
   }
 
   .modal-body img {
diff --git a/src/utils/colorTheme.js b/src/utils/colorTheme.js
new file mode 100644
index 0000000..00a8940
--- /dev/null
+++ b/src/utils/colorTheme.js
@@ -0,0 +1,19 @@
+// Utility to pick the logo color for the current theme using the "theme" key only
+export function getDefaultLogoColor(colors, theme = 'light') {
+  if (!colors || colors.length === 0) return undefined;
+  // Use the color with the matching theme key if present
+  const match = colors.find(c => c.theme === theme);
+  if (match) return match.value;
+  // Fallback: do not colorize (undefined)
+  return undefined;
+}
+
+// Utility to select the color with the matching theme key from the colors array
+export function getThemeColor(colors, theme = 'light') {
+  if (!colors || colors.length === 0) return undefined;
+  // Try to find a color with the matching theme key
+  const match = colors.find(c => c.theme === theme);
+  if (match) return match.value;
+  // Fallback: pick the first color
+  return colors[0].value;
+}