feat: Implement theme switching and improve UI consistency across components

src/App.svelte

@@ -7,6 +7,8 @@
   let searchQuery = '';
   let logos = [];
   let filteredLogos = [];
+  let theme = 'system';
+  let mq;
 
   // Load logos from JSON file with cache busting
   onMount(async () => {
@@ -32,8 +34,25 @@
     } catch (error) {
       console.error('Error loading logos:', error);
     }
+
+    const stored = localStorage.getItem('theme');
+    if (stored === 'light' || stored === 'dark' || stored === 'system') {
+      theme = stored;
+    }
+    applyTheme();
+
+    // Listen for system theme changes if using system
+    mq = window.matchMedia('(prefers-color-scheme: dark)');
+    mq.addEventListener('change', () => {
+      if (theme === 'system') applyTheme();
+    });
   });
 
+  $: {
+    console.log('[theme] reactive theme:', theme);
+    applyTheme();
+  }
+
   $: {
     filteredLogos = logos.filter(logo =>
       logo.name.toLowerCase().includes(searchQuery.toLowerCase())
@@ -69,39 +88,52 @@
     link.click();
     document.body.removeChild(link);
   }
+
+  function applyTheme() {
+    let effectiveTheme = theme;
+    if (theme === 'system') {
+      effectiveTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    }
+    document.documentElement.setAttribute('data-theme', effectiveTheme);
+    console.log('[theme] theme:', theme, 'effectiveTheme:', effectiveTheme);
+  }
+
+  function setTheme(newTheme) {
+    theme = newTheme;
+    localStorage.setItem('theme', newTheme);
+    console.log('[theme] setTheme:', newTheme);
+    applyTheme();
+  }
 </script>
 
 <main class="container">
-  <header>
+  <header class="main-header">
-    <h1>Logo Gallery</h1>
+    <div class="header-row">
-    <p>Collection of company and brand logos for your projects</p>
+      <h1>Logo Gallery</h1>
-
+      <div class="theme-switcher">
-    <div class="search-bar">
+        <button on:click={() => setTheme('system')} class:active={theme === 'system'} aria-label="System theme">
-      <input
+          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="8" stroke="currentColor" stroke-width="2"/><path d="M10 2a8 8 0 0 1 8 8" stroke="currentColor" stroke-width="2"/></svg>
-        type="text"
+        </button>
-        placeholder="Search logos..."
+        <button on:click={() => setTheme('light')} class:active={theme === 'light'} aria-label="Light mode">
-        bind:value={searchQuery}
+          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="5" stroke="currentColor" stroke-width="2"/><path d="M10 1v2M10 17v2M3.22 3.22l1.42 1.42M15.36 15.36l1.42 1.42M1 10h2M17 10h2M3.22 16.78l1.42-1.42M15.36 4.64l1.42-1.42" stroke="currentColor" stroke-width="2"/></svg>
-      />
+        </button>
+        <button on:click={() => setTheme('dark')} class:active={theme === 'dark'} aria-label="Dark mode">
+          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.5 13A7 7 0 0 1 7 4.5a7 7 0 1 0 8.5 8.5z" stroke="currentColor" stroke-width="2"/></svg>
+        </button>
+      </div>
     </div>
-
+    <div class="header-row header-controls">
-    <div class="view-toggle">
+      <div class="search-bar">
-      <button
+        <input type="text" placeholder="Search logos..." bind:value={searchQuery} />
-        class:active={viewMode === 'grid'}
+      </div>
-        on:click={setGridView}
+      <div class="view-toggle">
-      >
+        <button class:active={viewMode === 'grid'} on:click={setGridView} aria-label="Grid view">
-        Grid View
+          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="3" y="3" width="6" height="6" fill="currentColor"/><rect x="11" y="3" width="6" height="6" fill="currentColor"/><rect x="3" y="11" width="6" height="6" fill="currentColor"/><rect x="11" y="11" width="6" height="6" fill="currentColor"/></svg>
-      </button>
+        </button>
-      <button
+        <button class:active={viewMode === 'list'} on:click={setListView} aria-label="List view">
-        class:active={viewMode === 'list'}
+          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="4" y="5" width="12" height="2" fill="currentColor"/><rect x="4" y="9" width="12" height="2" fill="currentColor"/><rect x="4" y="13" width="12" height="2" fill="currentColor"/></svg>
-        on:click={setListView}
+        </button>
-      >
+      </div>
-        List View
-      </button>
-    </div>
-
-    <!-- Debug info to show current view mode -->
-    <div style="margin-bottom: 10px; font-size: 0.8rem; color: #666;">
-      Current view: {viewMode}
     </div>
   </header>
 
@@ -122,70 +154,173 @@
   </div>
 
   <footer>
-    <p>© {new Date().getFullYear()} Logo Gallery. All logos are property of their respective owners.</p>
+    <p>shadoll Logo Gallery. All logos are property of their respective owners.</p>
   </footer>
 </main>
 
 <style>
-  header {
+  :global(:root) {
-    margin-bottom: 2rem;
+    --color-bg: #fff;
+    --color-text: #222;
+    --color-card: #f8f8f8;
+    --color-border: #ddd;
+    --color-accent: #4f8cff;
+  }
+  :global([data-theme='dark']) {
+    --color-bg: #181a1b;
+    --color-text: #f3f3f3;
+    --color-card: #23272a;
+    --color-border: #333;
+    --color-accent: #7da6ff;
+  }
+  :global(html), :global(body) {
+    background: var(--color-bg);
+    color: var(--color-text);
+  }
+
+  .main-header {
+    margin-bottom: 1.5rem;
+    background: var(--color-card);
+    color: var(--color-text);
+    border-radius: 8px;
+    padding: 1.2rem 1rem 0.7rem 1rem;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
+  }
+
+  .header-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1.5rem;
+  }
+
+  .header-controls {
+    margin-top: 0.5rem;
   }
 
   h1 {
-    color: var(--secondary-color);
+    color: var(--color-accent);
-    margin-bottom: 0.5rem;
+    margin-bottom: 0;
+    font-size: 1.3rem;
+    font-weight: 700;
   }
 
-  p {
+  .search-bar {
-    margin-bottom: 1.5rem;
+    margin-bottom: 0;
+    width: 100%;
+    max-width: 350px;
+  }
+
+  .search-bar input {
+    width: 100%;
+    padding: 0.5rem 0.8rem;
+    border: 1px solid var(--color-border);
+    border-radius: 4px;
+    font-size: 1rem;
+    background: var(--color-card);
+    color: var(--color-text);
+    transition: background 0.2s, color 0.2s;
+  }
+
+  .search-bar input::placeholder {
+    color: #888;
+    opacity: 1;
+  }
+
+  .view-toggle {
+    display: flex;
+    gap: 0.2rem;
+  }
+
+  .view-toggle button {
+    padding: 0.3rem 0.5rem;
+    background: var(--color-card);
+    color: var(--color-text);
+    border: 1px solid var(--color-border);
+    border-radius: 4px;
+    font-size: 1rem;
+    transition: background 0.2s, color 0.2s;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .view-toggle button.active,
+  .view-toggle button:focus {
+    background: var(--color-accent);
+    color: #fff;
+    font-weight: bold;
+    outline: 2px solid var(--color-border);
+  }
+
+  .theme-switcher {
+    display: flex;
+    align-items: center;
+    gap: 0.2rem;
+    margin-left: auto;
+  }
+
+  .theme-switcher button {
+    background: none;
+    border: 1px solid var(--color-border);
+    color: var(--color-text);
+    padding: 0.2em 0.5em;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background 0.2s, color 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .theme-switcher button.active,
+  .theme-switcher button:focus {
+    background: var(--color-accent);
+    color: #fff;
+    font-weight: bold;
+    outline: 2px solid var(--color-border);
+  }
+
+  @media (max-width: 700px) {
+    .header-row {
+      flex-direction: column;
+      align-items: stretch;
+      gap: 0.5rem;
+    }
+
+    .main-header {
+      padding: 1rem 0.5rem 0.5rem 0.5rem;
+    }
+
+    h1 {
+      font-size: 1.1rem;
+    }
+  }
+
+  .logos-container {
+    width: 100%;
+  }
+
+  .logo-card, .logo-item {
+    background: var(--color-card);
+    color: var(--color-text);
+    border: 1px solid var(--color-border);
+    transition: background 0.2s, color 0.2s;
+  }
+
+  :global(.logo-card), :global(.logo-item) {
+    background: var(--color-card);
+    color: var(--color-text);
+    border: 1px solid var(--color-border);
+    transition: background 0.2s, color 0.2s;
   }
 
   footer {
     margin-top: 3rem;
     text-align: center;
     font-size: 0.9rem;
-    color: #666;
+    color: #888;
-  }
+    background: transparent;
-
-  .view-toggle {
-    display: flex;
-    gap: 0.5rem;
-    margin-bottom: 1rem;
-  }
-
-  .view-toggle button {
-    padding: 0.5rem 1rem;
-    background-color: #e0e0e0;
-    color: var(--text-color);
-    border: none;
-    border-radius: 4px;
-    font-size: 0.9rem;
-    transition: all 0.2s;
-  }
-
-  .active {
-    background-color: var(--secondary-color) !important;
-    color: white !important;
-    font-weight: bold;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-    transform: translateY(-2px);
-  }
-
-  .search-bar {
-    margin-bottom: 1.5rem;
-    width: 100%;
-    max-width: 500px;
-  }
-
-  .search-bar input {
-    width: 100%;
-    padding: 0.75rem;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    font-size: 1rem;
-  }
-
-  .logos-container {
-    width: 100%;
   }
 </style>

src/components/LogoGrid.svelte

@@ -52,25 +52,23 @@
 </div>
 
 <style>
+  :global(.logo-card) {
+    background: var(--color-card);
+    color: var(--color-text);
+    border: 1px solid var(--color-border);
+    border-radius: 8px;
+    overflow: hidden;
+    transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
+  }
+  :global(.logo-card:hover) {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+  }
   .logo-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
     gap: 1.5rem;
   }
-
-  .logo-card {
-    background: var(--card-background);
-    border-radius: 8px;
-    overflow: hidden;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-    transition: transform 0.2s, box-shadow 0.2s;
-  }
-
-  .logo-card:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
-  }
-
   .logo-image {
     height: 160px;
     width: 100%;
@@ -78,12 +76,13 @@
     align-items: center;
     justify-content: center;
     padding: 1rem;
-    background-color: #f5f5f5;
+    background: var(--color-card);
+    color: var(--color-text);
     position: relative;
     overflow: hidden;
     cursor: pointer;
+    transition: background 0.2s, color 0.2s;
   }
-
   .logo-image img {
     max-width: 80%;
     max-height: 80%;
@@ -92,26 +91,25 @@
     object-fit: contain;
     object-position: center;
   }
-
   .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(--secondary-color);
+    color: var(--color-accent, #4f8cff);
   }
-
   .logo-info p {
     font-size: 0.9rem;
-    color: #666;
+    color: var(--color-text);
     margin-bottom: 1rem;
   }
-
   .logo-actions {
     display: flex;
   }
-
   .no-results {
     grid-column: 1 / -1;
     text-align: center;

src/components/LogoList.svelte

@@ -23,7 +23,7 @@
 <div class="logo-list">
   {#each logos as logo}
     <div class="logo-item">
-      <div class="logo-image"
+      <div class="logo-preview"
         role="button"
         tabindex="0"
         aria-label="Preview {logo.name}"
@@ -52,94 +52,63 @@
 </div>
 
 <style>
-  .logo-list {
+  :global(.logo-item) {
-    display: flex;
+    background: var(--color-card);
-    flex-direction: column;
+    color: var(--color-text);
-    gap: 1rem;
+    border: 1px solid var(--color-border);
-  }
-
-  .logo-item {
-    display: flex;
-    align-items: center;
-    background: var(--card-background);
     border-radius: 8px;
-    overflow: hidden;
+    display: grid;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    grid-template-columns: 80px 2fr 3fr 150px;
-    transition: transform 0.2s, box-shadow 0.2s;
+    align-items: center;
-    width: 100%;
+    gap: 1rem;
+    padding: 1rem;
+    transition: background 0.2s, color 0.2s;
   }
-
+  .logo-preview {
-  .logo-item:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
-  }
-
-  .logo-image {
-    width: 120px;
-    min-width: 120px;
     height: 100px;
-    padding: 0.5rem;
+    width: 80px;
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: #f5f5f5;
+    background: var(--color-card);
-    position: relative;
+    color: var(--color-text);
+    border-radius: 4px;
     overflow: hidden;
-    border-right: 1px solid #eee;
     cursor: pointer;
+    transition: background 0.2s, color 0.2s;
   }
-
+  .logo-preview img {
-  .logo-image img {
     max-width: 80%;
     max-height: 80%;
     width: auto !important;
     height: auto !important;
     object-fit: contain;
+    object-position: center;
   }
-
   .logo-info {
-    flex-grow: 1;
+    background: var(--color-card);
-    padding: 1rem;
+    color: var(--color-text);
+    padding: 0.5rem 1rem;
+    border-radius: 4px;
+    transition: background 0.2s, color 0.2s;
   }
-
   .logo-info h3 {
     margin-bottom: 0.5rem;
-    color: var(--secondary-color);
+    color: var(--color-accent, #4f8cff);
-    font-size: 1.2rem;
   }
-
   .logo-info p {
     font-size: 0.9rem;
-    color: #666;
+    color: var(--color-text);
+    margin-bottom: 1rem;
   }
-
   .logo-actions {
     display: flex;
+  }
+
+  .logo-list {
+    display: flex;
     flex-direction: column;
-    gap: 0.5rem;
+    gap: 1rem;
-    padding: 1rem;
-    min-width: 120px;
-    border-left: 1px solid #eee;
-  }
-
-  .logo-actions button {
-    padding: 0.4rem 0.8rem;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 0.9rem;
-    text-align: center;
-    transition: background-color 0.2s;
-  }
-
-  .copy-btn {
-    background-color: #f0f0f0;
-    color: #333;
-  }
-
-  .download-btn {
-    background-color: var(--secondary-color);
-    color: white;
   }
 
   .no-results {

src/components/LogoModal.svelte

@@ -56,43 +56,41 @@
 {/if}
 
 <style>
-  .modal-backdrop {
+  :global(.modal-backdrop) {
     position: fixed;
     top: 0;
     left: 0;
-    width: 100%;
+    right: 0;
-    height: 100%;
+    bottom: 0;
     background-color: rgba(0, 0, 0, 0.7);
     display: flex;
-    justify-content: center;
     align-items: center;
+    justify-content: center;
     z-index: 1000;
-    backdrop-filter: blur(3px);
   }
 
-  .modal-content {
+  :global(.modal-content) {
-    background-color: white;
+    background: var(--color-card);
+    color: var(--color-text);
     border-radius: 8px;
+    padding: 1rem;
+    max-width: 500px;
     width: 90%;
-    max-width: 900px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
-    max-height: 90vh;
+    border: 1px solid var(--color-border);
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+    transition: background 0.2s, color 0.2s;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
   }
 
   .modal-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 1rem;
+    margin-bottom: 1rem;
-    border-bottom: 1px solid #eee;
   }
 
   .modal-header h2 {
     margin: 0;
-    color: var(--secondary-color);
+    font-size: 1.5rem;
   }
 
   .close-btn {
@@ -100,29 +98,22 @@
     border: none;
     font-size: 1.5rem;
     cursor: pointer;
-    color: #666;
   }
 
-  .close-btn:hover {
+  .modal-body img {
-    color: #333;
+    max-width: 100%;
-  }
+    margin-bottom: 1rem;
-
-  .modal-body {
-    padding: 1rem;
-    overflow-y: auto;
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
   }
 
   .preview-container {
     display: flex;
     justify-content: center;
     align-items: center;
-    background-color: #f5f5f5;
+    background-color: var(--color-card);
     border-radius: 4px;
     padding: 2rem;
     min-height: 300px;
+    transition: background 0.2s, color 0.2s;
   }
 
   .preview-container img {
@@ -133,8 +124,10 @@
 
   .logo-details {
     padding: 1rem;
-    background-color: #f9f9f9;
+    background-color: var(--color-card);
+    color: var(--color-text);
     border-radius: 4px;
+    transition: background 0.2s, color 0.2s;
   }
 
   .logo-details p {