Refactor logo management components: remove LogoModal, add Actions and Grid components, enhance List and Preview components with improved theme handling and SVG support.

public/data/logos.json

@@ -28,10 +28,7 @@
     "disable": false,
     "brand": "Apple",
     "tags": [
-      {
+      "tech"
-        "text": "tech",
-        "color": "silver"
-      }
     ],
     "colors": [
       {
@@ -74,7 +71,13 @@
       "transport",
       "garage"
     ],
-    "brand": "Dalnoboy Service"
+    "brand": "Dalnoboy Service",
+    "colors": [
+      {
+        "label": "Orange",
+        "value": "#ee7800"
+      }
+    ]
   },
   {
     "name": "Disney",
@@ -130,10 +133,7 @@
     "disable": false,
     "brand": "Google",
     "tags": [
-      {
+      "tech"
-        "text": "tech",
-        "color": "silver"
-      }
     ]
   },
   {
@@ -367,6 +367,16 @@
     "tags": [],
     "brand": "Nvidia"
   },
+  {
+    "name": "Okko",
+    "path": "logos/okko.svg",
+    "format": "SVG",
+    "disable": false,
+    "tags": [
+      "fuel"
+    ],
+    "brand": "Okko"
+  },
   {
     "name": "Privat24",
     "path": "logos/privat24.svg",
@@ -581,5 +591,15 @@
       "finance",
       "transfer"
     ]
+  },
+  {
+    "name": "WOG",
+    "path": "logos/wog.svg",
+    "format": "SVG",
+    "disable": false,
+    "tags": [
+      "fuel"
+    ],
+    "brand": "WOG"
   }
 ]

public/logos/okko.svg

@@ -0,0 +1,7 @@
+<svg data-v-3153e3cf="" width="100%" height="100%" viewBox="0 0 62 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g fill="currentColor">
+        <path
+            d="M28.06 55.617h-1.209c-1.41 0-2.418 1.21-2.216 2.62h6.045c1.814-1.814 3.829-3.224 6.045-4.232-.604-2.418-1.007-5.038-.806-7.456-1.813.202-3.425.403-5.239 1.008-.604.201-.806.604-.604 1.209l1.813 4.232c-1.209.806-2.216 1.612-3.224 2.62h-.604zm16.121-23.98c-.403.806-.403 1.814.403 2.62 1.612 1.41 3.426 2.217 4.434 4.232.604 1.007 1.41 3.022-.403 3.224-1.613.201-4.03-1.41-5.441-2.418.604.806.806 1.813 1.209 2.62.201.402.403.604.604.604 1.612.806 4.232 1.41 5.441-.202 1.21-1.41.806-3.224-.403-4.836-1.209-2.015-3.224-2.62-4.635-4.232-.201-.201-.403-.604-.201-.806.201-.604.806-.806 1.41-.806.807-.201 1.814-.403 2.419-.604.604-.403.806-1.008 1.007-1.41l.202-1.008c-1.41.403-3.023.806-4.232 1.41-.403.403-1.41 1.008-1.814 1.612zm-20.755-8.463c2.62-4.635 5.642-9.068 8.866-13.3.605-2.015.202-3.627-.604-5.24l-1.612-3.626a144.276 144.276 0 00-9.068 17.531c-.403.806-.202 1.814.403 2.418.604.605 1.41 1.41 2.015 2.217zm-9.471 35.063c5.239-7.456 13.702-12.292 22.77-12.695.806 2.62 2.217 5.037 3.83 7.254 3.022-.605 6.044-.403 8.866.403l.806 2.015c0 .202 0 .403-.202.403h-.806c-1.41 0-2.418 1.21-2.217 2.62h5.643c.806 0 1.41-.806 1.209-1.612l-2.418-6.247c-1.612-.605-3.224-.806-4.837-1.008l-3.425-8.866c-.605-1.612-2.62-2.418-4.03-2.821-1.612-.403-3.628-.605-5.441-.403 2.015-1.008 4.03-2.016 6.247-2.822 1.209-.403 2.015-1.41 2.418-2.418.403-1.007.604-1.813 1.007-2.82-1.813.805-3.627 1.611-5.44 2.619l3.627-2.418c1.612-1.008 2.418-2.015 2.82-3.627.202-1.21.404-2.217.605-3.426-2.216.806-4.634 2.015-6.65 3.022 1.008-.806 2.62-1.813 3.628-2.418 2.216-1.41 3.425-3.627 3.627-6.247V13.3c-3.023 1.813-6.045 3.627-8.867 5.844 1.612-1.612 3.225-3.225 5.038-4.635 2.62-2.418 3.627-5.643 3.023-9.068-.403-1.814-.806-3.627-1.41-5.441-3.426 3.224-6.65 6.851-9.673 10.479-3.224 4.03-6.247 8.463-9.068 12.896-.403.806-.403 1.612 0 2.217 1.007 1.41 2.015 3.023 2.418 4.635 1.209 4.634-1.21 6.045-3.627 7.859-.605.403-.605 0-.403-.202l.604-.604c1.814-1.613 2.015-4.635.806-6.852-1.612-2.82-3.828-5.44-6.448-7.456-.403 1.008-1.008 2.015-2.62 3.023-1.007.604-3.224 2.217-5.037 4.836.806 1.21 1.612 2.015 2.82 2.821.404-.403.807-.806 1.411-1.209.403-.403 1.008-.201 1.21.202.402-.403.402.201 0 .604l-.404.403c-.403.403-1.007.202-1.209-.201 0 0 0-.202-.201-.202l-.403.403c.403.806 1.007 2.217 1.209 2.217.201 0 .201 0 .403-.202l1.612-1.41c0-.202.201 0 .201.201-1.612 3.023-3.425 6.65-4.433 9.875-.201.604 0 1.209.202 1.612.806 1.41 2.216 2.82 2.62 3.224-1.411 1.813-2.62 3.829-3.628 5.844-.201.403-.604.604-1.209.604H8.917c-1.41 0-2.418 1.21-2.217 2.62h7.255zm16.322 7.859h-4.03L20.2 71.939v-5.843h-3.224v13.501h3.224V75.97l2.217-2.015 4.03 5.844h4.232l-5.642-8.061 5.24-5.642zm16.121 0h-4.03l-6.046 5.843v-5.843h-3.224v13.501h3.224V75.97l2.217-2.015 4.03 5.844h4.232l-5.642-8.061 5.239-5.642zm-35.869 0c-1.008-.202-2.217-.403-3.224-.403-1.008 0-2.217.201-3.224.403a4.77 4.77 0 00-3.628 3.627c-.604 2.217-.604 4.232 0 6.448a4.77 4.77 0 003.628 3.627c1.007 0 2.216.202 3.224.202 1.007 0 2.216-.201 3.224-.403a4.77 4.77 0 003.627-3.627c.605-2.217.605-4.232 0-6.449-.403-1.612-1.813-3.022-3.627-3.425zm.604 9.068c-.201.604-.604 1.209-1.41 1.209-1.612.403-3.224.403-5.038 0-.604-.202-1.209-.605-1.41-1.21a9.823 9.823 0 010-4.835c.201-.605.604-1.21 1.41-1.21 1.612-.403 3.224-.403 5.038 0 .604.202 1.209.605 1.41 1.21a9.824 9.824 0 010 4.836zm49.975-5.643a4.77 4.77 0 00-3.627-3.627c-1.007-.201-2.217-.403-3.224-.403-1.008 0-2.217.202-3.224.403a4.77 4.77 0 00-3.627 3.627c-.605 2.217-.605 4.232 0 6.449a4.77 4.77 0 003.627 3.627c1.007.202 2.216.403 3.224.403s2.217-.201 3.224-.403a4.77 4.77 0 003.627-3.627c.605-2.015.605-4.232 0-6.449zm-3.022 5.643c-.202.604-.605 1.209-1.41 1.209-1.613.403-3.225.403-5.039 0-.604-.202-1.209-.605-1.41-1.21a9.824 9.824 0 010-4.835c.201-.605.604-1.21 1.41-1.21 1.612-.403 3.224-.403 5.038 0 .605.202 1.21.605 1.41 1.21a9.822 9.822 0 010 4.836z">
+        </path>
+    </g>
+</svg>

public/logos/wog.svg

@@ -0,0 +1,12 @@
+<svg id="logo" viewBox="0 0 130 40" fill="none" stroke="none" height="100%" width="100%"
+    xmlns="http://www.w3.org/2000/svg">
+    <g>
+        <path
+            d="M79.37 12.49l-2.1 7.61c-.17.68-.79 3.47-1 5.52h-.18c-.2-2.23-.76-4.63-1-5.68l-1.67-7.46h-5.33l-1.68 7.46c-.23 1.05-.8 3.45-1 5.68h-.18c-.2-2.05-.82-4.85-1-5.52l-2.1-7.61H56l5.5 17.36c.68 2.13 1.79 3.24 3.7 3.24 1.88 0 3.08-1.17 3.55-3.24l.82-3.54c.36-1.49.86-3.65 1.09-5.29h.17c.23 1.64.73 3.8 1.08 5.3l.83 3.53c.5 2.07 1.68 3.24 3.55 3.24 1.91 0 3.03-1.11 3.7-3.24l5.5-17.36h-6.12zM96 12.05c-6.24 0-11.02 4.59-11.02 10.52S89.78 33.09 96 33.09c6.23 0 11.01-4.59 11.01-10.52.01-5.93-4.78-10.52-11-10.52zm0 15.93a5.36 5.36 0 01-5.45-5.41A5.36 5.36 0 0196 17.16a5.36 5.36 0 015.44 5.41 5.36 5.36 0 01-5.44 5.41zM129.8 21.06h-11.84v4.15h6.49c-.32 1.52-2.24 3.01-4.88 3.01-3.66 0-5.61-2.46-5.61-5.64a5.36 5.36 0 015.52-5.44c2.2 0 3.88 1.12 4.8 2.81l5.08-2.07c-1.8-3.51-5.11-5.81-9.87-5.81-6.17 0-11.01 4.56-11.01 10.52s4.64 10.52 11.01 10.52c6.99-.01 11.48-5.48 10.3-12.05z"
+            fill="#009345"></path>
+        <path d="M42.61 0a6.67 6.67 0 00-6 9.62l6 12.1 6-12.1a6.67 6.67 0 00-6-9.62z" fill="#8BC53F"></path>
+        <path
+            d="M21.23 29.02L15.77 40 .7 9.6A6.65 6.65 0 013.73.7a6.71 6.71 0 018.96 3.02l8.53 17.17a9.16 9.16 0 010 8.14zM39.18 29.02L33.72 40 18.65 9.6A6.65 6.65 0 0121.68.7a6.71 6.71 0 018.96 3.02l8.54 17.18a9.17 9.17 0 010 8.13z"
+            fill="#009345"></path>
+    </g>
+</svg>

src/App.svelte

@@ -1,7 +1,7 @@
 <script>
   import { onMount } from 'svelte';
-  import LogoGrid from './components/Grid.svelte';
+  import Grid from './components/Grid.svelte';
-  import LogoList from './components/List.svelte';
+  import List from './components/List.svelte';
 
   let viewMode = 'grid'; // 'grid' or 'list'
   let searchQuery = '';
@@ -55,12 +55,15 @@
     applyTheme();
   }
 
-  // Compute all unique tags as strings
+  // Compute all unique tags as objects with text and optional color
   $: allTags = Array.from(
-    new Set(
+    new Map(
-      logos.flatMap(logo => (logo.tags || []))
+      logos.flatMap(logo => (logo.tags || []).map(tag => {
-    )
+        if (typeof tag === 'string') return [tag, { text: tag }];
-  ).map(tag => typeof tag === 'object' ? tag.text : tag);
+        return [tag.text, tag];
+      }))
+    ).values()
+  ).sort((a, b) => a.text.localeCompare(b.text));
 
   $: filteredLogos = logos.filter(logo => {
     const matchesSearch = logo.name.toLowerCase().includes(searchQuery.toLowerCase());
@@ -176,7 +179,7 @@
   }
 
   function getTagObj(text) {
-    return { text };
+    return allTags.find(t => t.text === text);
   }
 
   // Listen for outside click to close dropdown
@@ -212,14 +215,17 @@
       </div>
       <div class="tag-filter">
         {#each selectedTags as tagText}
-          <button
+          {#if getTagObj(tagText)}
-            class="selected-tag"
+            <button
-            aria-label={`Remove tag: ${tagText}`}
+              class="selected-tag"
-            on:click={() => removeTag(tagText)}
+              style={getTagObj(tagText).color ? `background: ${getTagObj(tagText).color}; color: #fff;` : ''}
-          >
+              aria-label={`Remove tag: ${getTagObj(tagText).text}`}
-            <span>{tagText}</span>
+              on:click={() => removeTag(getTagObj(tagText).text)}
-            <span class="close">×</span>
+            >
-          </button>
+              {getTagObj(tagText).text}
+              <span class="close">&times;</span>
+            </button>
+          {/if}
         {/each}
         <div class="tag-dropdown">
           <button class="dropdown-toggle" on:click={toggleDropdown} aria-label="Add tag filter">
@@ -227,15 +233,15 @@
           </button>
           {#if tagDropdownOpen}
             <div class="dropdown-list">
-              {#each allTags.filter(tag => !selectedTags.includes(tag)) as tag}
+              {#each allTags.filter(t => !selectedTags.includes(t.text)) as tagObj}
                 <button
                   class="dropdown-tag"
-                  on:click={() => toggleTag(tag)}
+                  style={tagObj.color ? `background: ${tagObj.color}; color: #fff;` : ''}
-                >
+                  on:click={() => addTag(tagObj.text)}
-                  {tag}
+                  aria-label={`Add tag: ${tagObj.text}`}
-                </button>
+                >{tagObj.text}</button>
               {/each}
-              {#if allTags.filter(tag => !selectedTags.includes(tag)).length === 0}
+              {#if allTags.filter(t => !selectedTags.includes(t.text)).length === 0}
                 <span class="no-tags">No more tags</span>
               {/if}
             </div>
@@ -255,14 +261,14 @@
 
   <div class="logos-container">
     {#if viewMode === 'grid'}
-      <LogoGrid
+      <Grid
         logos={filteredLogos}
         onCopy={copyUrl}
         onDownload={downloadLogo}
         theme={effectiveTheme}
       />
     {:else}
-      <LogoList
+      <List
         logos={filteredLogos}
         onCopy={copyUrl}
         onDownload={downloadLogo}

src/components/Actions.svelte

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

src/components/Grid.svelte

@@ -1,8 +1,9 @@
 <script>
   import Preview from './Preview.svelte';
   import Actions from './Actions.svelte';
-  import Row from './Row.svelte';
+  import InlineSvg from './InlineSvg.svelte';
   import { onMount, onDestroy } from 'svelte';
+  import { getDefaultLogoColor, getThemeColor } from '../utils/colorTheme.js';
 
   export let logos = [];
   export let onCopy;
@@ -11,25 +12,185 @@
   let showModal = false;
   let selectedLogo = null;
 
+  function openPreview(logo) {
+    selectedLogo = logo;
+    showModal = true;
+  }
+
+  function closeModal() {
+    showModal = false;
+  }
+
+  function isSvgLogo(logo) {
+    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 = {};
+
+  async function fetchInlineSvg(path) {
+    if (svgCache[path]) return svgCache[path];
+    const res = await fetch(path);
+    const text = await res.text();
+    svgCache[path] = text;
+    return text;
+  }
 </script>
 
-<Preview show={showModal} logo={selectedLogo} theme={theme} on:close={() => showModal = false} />
+<Preview show={showModal} logo={selectedLogo} theme={theme} on:close={closeModal} />
 
 <div class="logo-grid">
   {#each logos as logo}
-    <Row {logo} view="grid" showActions={true} onPreview={() => { selectedLogo = logo; showModal = true; }}>
+    <div class="logo-card">
-      <svelte:fragment slot="actions">
+      <div class="logo-image"
-        <Actions {logo} {onCopy} {onDownload} />
+        role="button"
-      </svelte:fragment>
+        tabindex="0"
-    </Row>
+        aria-label="Preview {logo.name}"
+        on:click={() => openPreview(logo)}
+        on:keydown={(e) => (e.key === 'Enter' || e.key === ' ') && openPreview(logo)}
+        style="cursor:pointer;"
+      >
+        {#if isSvgLogo(logo)}
+          {#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}
+      </div>
+      <div class="logo-info">
+        <h3>{logo.name}</h3>
+        <div class="format-row">
+          <span><strong>Format:</strong> {logo.format}</span>
+          {#if logo.colors}
+            <div class="color-switcher-preview align-right">
+              <span
+                class="color-circle color-reset"
+                title="Reset to theme color"
+                tabindex="0"
+                role="button"
+                aria-label="Reset to theme color"
+                style="background: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 0; border: none;"
+                on:click|stopPropagation={() => logo._activeColor = undefined}
+                on:keydown|stopPropagation={(e) => (e.key === 'Enter' || e.key === ' ') && (logo._activeColor = undefined)}
+              >
+                <svg width="100%" height="100%" viewBox="0 0 800 800" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+                  <circle cx="400" cy="400" r="400" style="fill:#d6d6d6;"/>
+                  <path d="M682.843,117.843l-565.686,565.685c-156.209,-156.21 -156.209,-409.476 0,-565.685c156.21,-156.21 409.476,-156.21 565.686,-0Z" style="fill:#33363f;"/>
+                </svg>
+              </span>
+              {#each logo.colors as colorObj}
+                <span
+                  class="color-circle"
+                  title={colorObj.label}
+                  style="background:{colorObj.value}"
+                  tabindex="0"
+                  role="button"
+                  on:click|stopPropagation={() => logo._activeColor = colorObj.value}
+                  on:keydown|stopPropagation={(e) => (e.key === 'Enter' || e.key === ' ') && (logo._activeColor = colorObj.value)}
+                ></span>
+              {/each}
+            </div>
+          {/if}
+        </div>
+        <div class="logo-actions">
+          <Actions {logo} {onCopy} {onDownload} />
+        </div>
+      </div>
+    </div>
+  {:else}
+    <p class="no-results">No logos found matching your search criteria.</p>
   {/each}
 </div>
 
 <style>
+  :global(.logo-card) {
+    background: var(--color-card);
+    color: var(--color-text);
+    border: 1px solid var(--color-border);
+    border-radius: 8px;
+    /* overflow: hidden; removed to allow dropdown menus to escape the card */
+    transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
+    min-width: 320px;
+  }
   .logo-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
     gap: 1.5rem;
   }
+  .logo-image {
+    height: 260px;
+    width: 100%;
+    padding: 1rem;
+    position: relative;
+  }
+  .logo-info {
+    padding: 1rem;
+    background: var(--color-card);
+    color: var(--color-text);
+    border-top: 1px solid var(--color-border);
+    transition: background 0.2s, color 0.2s;
+  }
+  .logo-info h3 {
+    margin-bottom: 0.5rem;
+    color: var(--color-accent, #4f8cff);
+  }
+  .no-results {
+    grid-column: 1 / -1;
+    text-align: center;
+    padding: 2rem;
+    color: #666;
+  }
+  .color-circle.color-reset {
+    background: none !important;
+    width: 24px;
+    height: 24px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    margin: 0;
+    border: none;
+  }
+  .color-circle.color-reset svg {
+    pointer-events: none;
+  }
+  .color-circle {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 4px;
+    cursor: pointer;
+    box-sizing: border-box;
+    padding: 0;
+  }
+  .color-switcher-preview.align-right {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
 </style>

src/components/InlineSvg.svelte

@@ -1,11 +1,11 @@
 <script>
-  import { onMount } from 'svelte';
+  import { onMount } from "svelte";
   export let path;
   export let color;
-  export let colorConfig = { target: 'path', attribute: 'fill' };
+  export let colorConfig = { target: "path", attribute: "fill" };
-  export let alt;
+  export const alt = "";
 
-  let svgHtml = '';
+  let svgHtml = "";
 
   async function fetchAndColorSvg() {
     const res = await fetch(path);
@@ -17,10 +17,10 @@
     }
     // Parse and update color only if user selected
     const parser = new DOMParser();
-    const doc = parser.parseFromString(text, 'image/svg+xml');
+    const doc = parser.parseFromString(text, "image/svg+xml");
     // 1. Parse <style> rules and apply as inline attributes before removing <style>
-    const styleEls = Array.from(doc.querySelectorAll('style'));
+    const styleEls = Array.from(doc.querySelectorAll("style"));
-    styleEls.forEach(styleEl => {
+    styleEls.forEach((styleEl) => {
       const css = styleEl.textContent;
       // Only handle simple .class { ... } rules
       const regex = /\.([\w-]+)\s*{([^}]*)}/g;
@@ -29,19 +29,22 @@
         const className = match[1];
         const rules = match[2];
         // Find all elements with this class
-        doc.querySelectorAll('.' + className).forEach(el => {
+        doc.querySelectorAll("." + className).forEach((el) => {
-          rules.split(';').forEach(rule => {
+          rules.split(";").forEach((rule) => {
-            const [prop, value] = rule.split(':').map(s => s && s.trim());
+            const [prop, value] = rule.split(":").map((s) => s && s.trim());
             if (prop && value) {
               // Apply all style properties, not just fill/stroke
-              el.setAttribute(prop.replace(/-([a-z])/g, g => g[1].toUpperCase()), value);
+              el.setAttribute(
+                prop.replace(/-([a-z])/g, (g) => g[1].toUpperCase()),
+                value,
+              );
             }
           });
         });
       }
     });
     // Remove all <style> elements
-    styleEls.forEach(styleEl => styleEl.remove());
+    styleEls.forEach((styleEl) => styleEl.remove());
     let targets;
     if (colorConfig.selector) {
       targets = doc.querySelectorAll(colorConfig.selector);
@@ -50,21 +53,21 @@
     } else {
       targets = [];
     }
-    targets.forEach(el => {
+    targets.forEach((el) => {
       if (colorConfig.attribute) {
         // Legacy: force a single attribute
         el.setAttribute(colorConfig.attribute, color);
       } else {
         // Always override fill and stroke unless they are 'none'
-        if (el.hasAttribute('fill') && el.getAttribute('fill') !== 'none') {
+        if (el.hasAttribute("fill") && el.getAttribute("fill") !== "none") {
-          el.setAttribute('fill', color);
+          el.setAttribute("fill", color);
         }
-        if (el.hasAttribute('stroke') && el.getAttribute('stroke') !== 'none') {
+        if (el.hasAttribute("stroke") && el.getAttribute("stroke") !== "none") {
-          el.setAttribute('stroke', color);
+          el.setAttribute("stroke", color);
         }
-        if (!el.hasAttribute('fill') && !el.hasAttribute('stroke')) {
+        if (!el.hasAttribute("fill") && !el.hasAttribute("stroke")) {
           // If neither, prefer fill
-          el.setAttribute('fill', color);
+          el.setAttribute("fill", color);
         }
       }
     });

src/components/List.svelte

@@ -1,7 +1,8 @@
 <script>
   import Preview from './Preview.svelte';
   import Actions from './Actions.svelte';
-  import Row from './Row.svelte';
+  import InlineSvg from './InlineSvg.svelte';
+  import { getThemeColor, getDefaultLogoColor } from '../utils/colorTheme.js';
   import { onMount, onDestroy } from 'svelte';
 
   export let logos = [];
@@ -11,25 +12,175 @@
   let showModal = false;
   let selectedLogo = null;
 
-  export let theme;
+  let theme = getTheme();
+
+  function openPreview(logo) {
+    selectedLogo = logo;
+    showModal = true;
+  }
+
+  function closeModal() {
+    showModal = false;
+  }
+
+  function isSvgLogo(logo) {
+    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>
 
-<Preview show={showModal} logo={selectedLogo} theme={theme} on:close={() => showModal = false} />
+<Preview show={showModal} logo={selectedLogo} on:close={closeModal} />
 
 <div class="logo-list">
   {#each logos as logo}
-    <Row {logo} view="list" showActions={true} onPreview={() => { selectedLogo = logo; showModal = true; }}>
+    <div class="logo-item">
-      <svelte:fragment slot="actions">
+      <div class="logo-preview"
+        role="button"
+        tabindex="0"
+        aria-label="Preview {logo.name}"
+        on:click={() => openPreview(logo)}
+        on:keydown={(e) => (e.key === 'Enter' || e.key === ' ') && openPreview(logo)}
+        style="cursor:pointer;"
+      >
+        {#if isSvgLogo(logo)}              <InlineSvg
+                path={logo.path}
+                color={logo.colors ? (logo._activeColor || getLogoThemeColor(logo)) : undefined}
+                colorConfig={logo.colors ? logo.colorConfig : undefined}
+                alt={logo.name}
+              />
+        {:else}
+          <img src={logo.path} alt={logo.name} />
+        {/if}
+      </div>
+      <div class="logo-info">
+        <h3>{logo.name}</h3>
+        <div class="format-row">
+          <span><strong>Format:</strong> {logo.format}</span>
+        </div>
+        {#if logo.colors}
+          <div class="color-switcher-preview align-left">
+            <span
+              class="color-circle color-reset"
+              title="Reset to theme color"
+              tabindex="0"
+              role="button"
+              aria-label="Reset to theme color"
+              style="background: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 0; border: none;"
+              on:click|stopPropagation={() => logo._activeColor = undefined}
+              on:keydown|stopPropagation={(e) => (e.key === 'Enter' || e.key === ' ') && (logo._activeColor = undefined)}
+            >
+              <svg width="100%" height="100%" viewBox="0 0 800 800" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+                <circle cx="400" cy="400" r="400" style="fill:#d6d6d6;"/>
+                <path d="M682.843,117.843l-565.686,565.685c-156.209,-156.21 -156.209,-409.476 0,-565.685c156.21,-156.21 409.476,-156.21 565.686,-0Z" style="fill:#33363f;"/>
+              </svg>
+            </span>
+            {#each logo.colors as colorObj}
+              <span
+                class="color-circle"
+                title={colorObj.label}
+                style={`background:${colorObj.value}`}
+                tabindex="0"
+                role="button"
+                on:click|stopPropagation={() => logo._activeColor = colorObj.value}
+                on:keydown|stopPropagation={(e) => (e.key === 'Enter' || e.key === ' ') && (logo._activeColor = colorObj.value)}
+              ></span>
+            {/each}
+          </div>
+        {/if}
+      </div>
+      <div class="logo-actions">
         <Actions {logo} {onCopy} {onDownload} />
-      </svelte:fragment>
+      </div>
-    </Row>
+    </div>
+  {:else}
+    <p class="no-results">No logos found matching your search criteria.</p>
   {/each}
 </div>
 
 <style>
+  :global(.logo-item) {
+    background: var(--color-card);
+    color: var(--color-text);
+    border: 1px solid var(--color-border);
+    border-radius: 8px;
+    display: grid;
+    grid-template-columns: 80px 2fr 3fr 150px;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem;
+    transition: background 0.2s, color 0.2s;
+  }
+  .logo-preview {
+    height: 100px;
+    width: 80px;
+    padding: 0;
+    border-radius: 4px;
+    position: relative;
+  }
+  .logo-info h3 {
+    margin-bottom: 0.5rem;
+    color: var(--color-accent, #4f8cff);
+  }
   .logo-list {
     display: flex;
     flex-direction: column;
-    gap: 0.5em;
+    gap: 1rem;
+  }
+  .no-results {
+    text-align: center;
+    padding: 2rem;
+    color: #666;
+  }
+  .color-circle {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 4px;
+    cursor: pointer;
+    box-sizing: border-box;
+  }
+  .color-switcher-preview.align-left {
+    justify-content: flex-start;
+  }
+  .color-circle.color-reset {
+    background: none !important;
   }
 </style>

src/components/Preview.svelte

@@ -1,7 +1,7 @@
 <script>
   import { onMount, onDestroy, createEventDispatcher } from 'svelte';
   import InlineSvg from './InlineSvg.svelte';
-  import { getDefaultLogoColor } from '../utils/colorTheme.js';
+  import { getDefaultLogoColor, getThemeColor } from '../utils/colorTheme.js';
 
   export let show = false;
   export let logo = null;
@@ -22,31 +22,21 @@
     return logo && logo.format && logo.format.toLowerCase() === 'svg';
   }
 
-  // Helper to get tag object - simplified without tags.json
-  function getTagObj(text) {
-    return { text: typeof text === 'object' ? text.text : text };
-  }
-
   // 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;
     }
   }
 
-  $: if (logo && logo.tags && logo.tags.length) {
-    logo.tags.forEach(tag => {
-      console.log('[LogoModal] Tag:', tag);
-    });
-  }
-
   onMount(() => {
     document.addEventListener('keydown', handleKeydown);
-    console.log('[LogoModal] Mounted, added keydown event listener');
   });
 
   onDestroy(() => {
@@ -123,8 +113,8 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
           <p><strong>Path:</strong> {logo.path}</p>
           {#if logo.tags && logo.tags.length}
             <div class="logo-tags">
-              {#each logo.tags as tag}
+              {#each logo.tags as tagObj}
-                <span class="logo-tag">{typeof tag === 'object' ? tag.text : tag}</span>
+                <span class="logo-tag" style={tagObj.color ? `background:${tagObj.color}` : ''}>{tagObj.text || tagObj}</span>
               {/each}
             </div>
           {/if}

src/components/Row.svelte

@@ -1,159 +0,0 @@
-<script>
-  export let logo;
-  export let onCopy;
-  export let onDownload;
-  export let view = 'grid'; // or 'list'
-  export let showActions = true;
-  export let onPreview = null;
-  import InlineSvg from './InlineSvg.svelte';
-  import { getDefaultLogoColor } from '../utils/colorTheme.js';
-</script>
-
-<div class="logo-row {view}">
-  <div
-    class="logo-img"
-    on:click={onPreview}
-    on:keydown={(e) => (e.key === 'Enter' || e.key === ' ') && onPreview && onPreview(e)}
-    tabindex="0"
-    role="button"
-    aria-label="Preview logo"
-  >
-    {#if logo.format && logo.format.toLowerCase() === 'svg'}
-      <InlineSvg path={logo.path} color={logo.colors ? (logo._activeColor || getDefaultLogoColor(logo.colors)) : undefined} colorConfig={logo.colors ? logo.colorConfig : undefined} alt={logo.name} />
-    {:else}
-      <img src={logo.path} alt={logo.name} />
-    {/if}
-  </div>
-  <div class="logo-info">
-    <h3>{logo.name}</h3>
-    <div class="format-row">
-      <span><strong>Format:</strong> {logo.format}</span>
-      {#if logo.colors}
-        <div class="color-switcher-preview {view === 'grid' ? 'align-right' : 'align-left'}">
-          <span class="color-circle color-reset" title="Reset to theme color" tabindex="0" role="button" aria-label="Reset to theme color" style="background: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 0; border: none;"
-            on:click|stopPropagation={() => logo._activeColor = undefined}
-            on:keydown|stopPropagation={(e) => (e.key === 'Enter' || e.key === ' ') && (logo._activeColor = undefined)}>
-            <svg width="100%" height="100%" viewBox="0 0 800 800" version="1.1" xmlns="http://www.w3.org/2000/svg" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-              <circle cx="400" cy="400" r="400" style="fill:#d6d6d6;"/>
-              <path d="M682.843,117.843l-565.686,565.685c-156.209,-156.21 -156.209,-409.476 0,-565.685c156.21,-156.21 409.476,-156.21 565.686,-0Z" style="fill:#33363f;"/>
-            </svg>
-          </span>
-          {#each logo.colors as colorObj}
-            <span class="color-circle" title={colorObj.label} style={`background:${colorObj.value}`} tabindex="0" role="button"
-              on:click|stopPropagation={() => logo._activeColor = colorObj.value}
-              on:keydown|stopPropagation={(e) => (e.key === 'Enter' || e.key === ' ') && (logo._activeColor = colorObj.value)}></span>
-          {/each}
-        </div>
-      {/if}
-    </div>
-    {#if logo.tags && logo.tags.length}
-      <div class="logo-tags">
-        {#each logo.tags as tag}
-          <span class="logo-tag">{typeof tag === 'object' ? tag.text : tag}</span>
-        {/each}
-      </div>
-    {/if}
-    <slot name="extra" />
-  </div>
-  {#if showActions}
-    <div class="logo-actions">
-      <slot name="actions" />
-    </div>
-  {/if}
-</div>
-
-<style>
-  .logo-row {
-    display: flex;
-    align-items: center;
-    padding: 0.5em 0.5em;
-    border-bottom: 1px solid #eee;
-    gap: 1em;
-  }
-  .logo-row.grid {
-    flex-direction: column;
-    align-items: stretch;
-    border-bottom: none;
-    border-radius: 10px;
-    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
-    margin-bottom: 1em;
-    padding: 1em;
-  }
-  .logo-row.list {
-    flex-direction: row;
-    align-items: center;
-    border-radius: 0;
-    box-shadow: none;
-    margin-bottom: 0;
-    padding: 0.5em 0.5em;
-  }
-  .logo-img {
-    flex-shrink: 0;
-    width: 64px;
-    height: 64px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: #fff;
-    border-radius: 8px;
-    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
-    cursor: pointer;
-  }
-  .logo-info {
-    flex: 1 1 auto;
-    min-width: 0;
-  }
-  .logo-actions {
-    display: flex;
-    align-items: center;
-    gap: 0.5em;
-  }
-  .color-switcher-preview {
-    display: flex;
-    align-items: center;
-    gap: 0.4em;
-  }
-  .color-switcher-preview.align-right {
-    justify-content: flex-end;
-  }
-  .color-switcher-preview.align-left {
-    justify-content: flex-start;
-  }
-  .color-circle {
-    width: 24px;
-    height: 24px;
-    border-radius: 50%;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    margin-right: 4px;
-    cursor: pointer;
-    box-sizing: border-box;
-    padding: 0;
-  }
-  .color-circle.color-reset {
-    background: none !important;
-  }
-  .logo-tag {
-    display: inline-block;
-    background: var(--color-accent, #4f8cff);
-    color: #fff;
-    border-radius: 12px;
-    padding: 0.2em 0.8em;
-    font-size: 0.85em;
-    font-weight: 500;
-    letter-spacing: 0.02em;
-    margin-right: 0.3em;
-    margin-top: 0.2em;
-    margin-bottom: 0.2em;
-    transition: background 0.2s;
-  }
-  .logo-card {
-    background: var(--color-card);
-    color: var(--color-text);
-    border: 1px solid var(--color-border);
-    border-radius: 8px;
-    transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
-    min-width: 320px;
-  }
-</style>