feat: update SVG logos and enhance color switcher functionality

src/components/InlineSvg.svelte

@@ -10,12 +10,12 @@
   async function fetchAndColorSvg() {
     const res = await fetch(path);
     let text = await res.text();
-    if (!color || !colorConfig) {
-      // No colorization, render as-is
+    if (!color) {
+      // No user-selected color, render as-is (SVG uses fill="currentColor")
       svgHtml = text;
       return;
     }
-    // Parse and update color
+    // Parse and update color only if user selected
     const parser = new DOMParser();
     const doc = parser.parseFromString(text, 'image/svg+xml');
     // 1. Parse <style> rules and apply as inline attributes before removing <style>

src/components/LogoGrid.svelte

@@ -83,8 +83,23 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
         <h3>{logo.name}</h3>
         <div class="format-row">
           <span><strong>Format:</strong> {logo.format}</span>
-          {#if isSvgLogo(logo) && logo.colors}
-            <span class="color-switcher-inline">
+          {#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"
@@ -92,17 +107,11 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
                   style="background:{colorObj.value}"
                   tabindex="0"
                   role="button"
-                  aria-label={"Switch color to " + colorObj.label}
                   on:click|stopPropagation={() => logo._activeColor = colorObj.value}
-                  on:keydown|stopPropagation={(e) => {
-                    if (e.key === 'Enter' || e.key === ' ') {
-                      logo._activeColor = colorObj.value;
-                      e.preventDefault();
-                    }
-                  }}
+                  on:keydown|stopPropagation={(e) => (e.key === 'Enter' || e.key === ' ') && (logo._activeColor = colorObj.value)}
                 ></span>
               {/each}
-            </span>
+            </div>
           {/if}
         </div>
         <div class="logo-actions">
@@ -153,4 +162,35 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
     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/LogoList.svelte

@@ -93,23 +93,32 @@
         <div class="format-row">
           <span><strong>Format:</strong> {logo.format}</span>
         </div>
-        {#if isSvgLogo(logo) && logo.colors}
-          <div class="color-switcher-under">
+        {#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}"
+                style={`background:${colorObj.value}`}
                 tabindex="0"
                 role="button"
-                aria-label={"Set color " + colorObj.label}
                 on:click|stopPropagation={() => logo._activeColor = colorObj.value}
-                on:keydown|stopPropagation={(e) => {
-                  if (e.key === 'Enter' || e.key === ' ') {
-                    logo._activeColor = colorObj.value;
-                    e.preventDefault();
-                  }
-                }}
+                on:keydown|stopPropagation={(e) => (e.key === 'Enter' || e.key === ' ') && (logo._activeColor = colorObj.value)}
               ></span>
             {/each}
           </div>
@@ -158,4 +167,21 @@
     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/LogoModal.svelte

@@ -78,11 +78,26 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
         <div class="logo-details">
           {#if isSvgLogo(logo) && logo.colors}
             <div class="color-switcher-preview">
+              <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}"
+                  style={`background:${colorObj.value}`}
                   tabindex="0"
                   role="button"
                   on:click|stopPropagation={() => logo._activeColor = colorObj.value}
@@ -204,4 +219,24 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
     gap: 0.5rem;
   }
 
+  .color-switcher-preview {
+    display: flex;
+    align-items: center;
+  }
+
+  .color-circle.color-reset {
+    background: none !important;
+  }
+
+  .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;
+  }
 </style>