add logo

assets/icon.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <style>
+    .icon-text {
+      font-family: 'Space Grotesk', system-ui, sans-serif;
+      font-weight: 700;
+      font-size: 28px;
+    }
+  </style>
+  <text x="6" y="26" fill="currentColor" class="icon-text">d</text>
+</svg>

assets/logo-dark.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 32">
+  <style>
+    .logo-text {
+      font-family: 'Space Grotesk', system-ui, sans-serif;
+      font-weight: 700;
+      font-size: 24px;
+    }
+  </style>
+  <text x="4" y="24" class="logo-text">
+    <tspan fill="#F0F0F0">d</tspan><tspan fill="#AAAAAA">gray</tspan>
+  </text>
+</svg>

assets/logo-light.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 32">
+  <style>
+    .logo-text {
+      font-family: 'Space Grotesk', system-ui, sans-serif;
+      font-weight: 700;
+      font-size: 24px;
+    }
+  </style>
+  <text x="4" y="24" class="logo-text">
+    <tspan fill="#1A1A1A">d</tspan><tspan fill="#555555">gray</tspan>
+  </text>
+</svg>

assets/logo.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 32">
+  <style>
+    .logo-text {
+      font-family: 'Space Grotesk', system-ui, sans-serif;
+      font-weight: 700;
+      font-size: 24px;
+    }
+  </style>
+  <text x="4" y="24" class="logo-text">
+    <tspan fill="currentColor">d</tspan><tspan fill="currentColor" opacity="0.6">gray</tspan>
+  </text>
+</svg>

css/components.css

@@ -211,9 +211,34 @@ app-header .header-inner {
 }
 
 app-header .logo {
-    font-size: var(--font-size-xl);
-    font-weight: var(--font-weight-bold);
-    color: var(--color-primary);
+    display: flex;
+    align-items: center;
+}
+
+app-header .logo-img {
+    height: 28px;
+    width: auto;
+}
+
+app-header .logo-dark {
+    display: none;
+}
+
+[data-theme="dark"] app-header .logo-light {
+    display: none;
+}
+
+[data-theme="dark"] app-header .logo-dark {
+    display: block;
+}
+
+@media (prefers-color-scheme: dark) {
+    html:not([data-theme="light"]) app-header .logo-light {
+        display: none;
+    }
+    html:not([data-theme="light"]) app-header .logo-dark {
+        display: block;
+    }
 }
 
 app-header .search-box {

index.html

@@ -4,14 +4,17 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="dgray.io - deals in gray">
-    <meta name="theme-color" content="#2563eb">
+    <meta name="theme-color" content="#555555">
     
     <title>dgray.io</title>
     
     <link rel="manifest" href="manifest.json">
-    <link rel="icon" type="image/svg+xml" href="assets/icons/icon.svg">
+    <link rel="icon" type="image/svg+xml" href="assets/icon.svg">
     <link rel="apple-touch-icon" href="assets/icons/icon-192.png">
     
+    <!-- Preload Logo Font -->
+    <link rel="preload" href="assets/fonts/SpaceGrotesk-Bold.woff2" as="font" type="font/woff2" crossorigin>
+    
     <link rel="stylesheet" href="css/fonts.css">
     <link rel="stylesheet" href="css/variables.css">
     <link rel="stylesheet" href="css/base.css">

js/components/app-header.js

@@ -72,7 +72,10 @@ class AppHeader extends HTMLElement {
     render() {
         this.innerHTML = /* html */`
             <div class="header-inner container">
-                <a href="#/" class="logo">dgray.io</a>
+                <a href="#/" class="logo" aria-label="dgray.io Home">
+                    <img src="assets/logo-light.svg" alt="dgray.io" class="logo-img logo-light" width="100" height="28">
+                    <img src="assets/logo-dark.svg" alt="dgray.io" class="logo-img logo-dark" width="100" height="28">
+                </a>
                 
                 <div class="header-actions">
                     <a href="#/create" class="btn btn-primary btn-create" title="${t('header.createListing')}" data-i18n-title="header.createListing">