From befca6144b1ebdda1a3d58c27f6380ec9e8fbe09 Mon Sep 17 00:00:00 2001
From: Declan Teevan <dt@hexolan.com>
Date: Tue, 19 Aug 2025 15:07:04 +0100
Subject: [PATCH] feat (web): light/dark logo assets

fix: light/dark mode toggling

todo: implement a light theme
---
 web/src/app.css                         |  2 +-
 web/src/components/LightDarkMode.svelte |  1 +
 web/src/components/Navbar.svelte        | 20 ++++++
 web/src/routes/+page.svelte             | 17 +-----
 web/src/routes/admin/.gitkeep           |  0
 web/src/routes/auth/.gitkeep            |  0
 web/src/routes/orders/+page.svelte      |  0
 web/src/routes/products/+page.svelte    |  0
 web/static/assets/logo-light.svg        | 81 +++++++++++++++++++++++++
 web/static/assets/logo.svg              | 81 +++++++++++++++++++++++++
 10 files changed, 186 insertions(+), 16 deletions(-)
 create mode 100644 web/src/components/Navbar.svelte
 create mode 100644 web/src/routes/admin/.gitkeep
 create mode 100644 web/src/routes/auth/.gitkeep
 create mode 100644 web/src/routes/orders/+page.svelte
 create mode 100644 web/src/routes/products/+page.svelte
 create mode 100644 web/static/assets/logo-light.svg
 create mode 100644 web/static/assets/logo.svg

diff --git a/web/src/app.css b/web/src/app.css
index 7ab13f4..c0c9279 100644
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -8,7 +8,7 @@
 
 @source '../node_modules/@skeletonlabs/skeleton-svelte/dist';
 
-[data-theme='theme'] {
+[data-mode='dark'] {
     --text-scaling: 1.067;
     --base-font-color: var(--color-surface-950);
     --base-font-color-dark: var(--color-surface-50);
diff --git a/web/src/components/LightDarkMode.svelte b/web/src/components/LightDarkMode.svelte
index c1ed221..a9f46f5 100644
--- a/web/src/components/LightDarkMode.svelte
+++ b/web/src/components/LightDarkMode.svelte
@@ -6,6 +6,7 @@
   $effect(() => {
     const mode = localStorage.getItem('mode') || 'light';
     checked = mode === 'dark';
+    document.documentElement.setAttribute('data-mode', mode);
   });
 
   const onCheckedChange = (event: { checked: boolean }) => {
diff --git a/web/src/components/Navbar.svelte b/web/src/components/Navbar.svelte
new file mode 100644
index 0000000..ea597fb
--- /dev/null
+++ b/web/src/components/Navbar.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Navigation } from '@skeletonlabs/skeleton-svelte';
+</script>
+
+<header class="border-b border-surface-200-800 bg-surface-100-900">
+    <div class="mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div class="flex h-16 items-center justify-between">
+            <a href="/" class="flex items-center gap-2 font-semibold">
+                <img src="/assets/logo.svg" alt="Stocklet" class="h-8 w-auto dark:hidden" />
+                <img src="/assets/logo-light.svg" alt="Stocklet" class="h-8 w-auto hidden dark:block" />
+            </a>
+            <Navigation.Bar classes="bg-transparent width-auto h-12 p-0">
+                <Navigation.Tile href="/" label="Home" />
+                <Navigation.Tile href="#" label="Products" />
+                <Navigation.Tile href="#" label="Orders" />
+                <Navigation.Tile href="#" label="Account" />
+            </Navigation.Bar>
+        </div>
+    </div>
+</header>
\ No newline at end of file
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index 6ee8a24..ce56ac2 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -1,25 +1,12 @@
 <script lang="ts">
 	import { Navigation, Avatar, Rating } from '@skeletonlabs/skeleton-svelte';
+	import Navbar from '../components/Navbar.svelte';
 	import Footer from '../components/Footer.svelte';
 </script>
 
 <div data-theme="theme" class="min-h-screen flex flex-col">
 	<!-- Navbar -->
-	<header class="border-b border-surface-200-800 bg-surface-100-900">
-		<div class="mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8">
-			<div class="flex h-16 items-center justify-between">
-				<a href="/" class="flex items-center gap-2 font-semibold">
-					<img src="/assets/vector/default-monochrome.svg" alt="Stocklet" class="h-8 w-auto" />
-				</a>
-				<Navigation.Bar classes="bg-transparent width-auto h-12 p-0">
-					<Navigation.Tile href="/" label="Home" />
-					<Navigation.Tile href="#" label="Products" />
-					<Navigation.Tile href="#" label="Orders" />
-					<Navigation.Tile href="#" label="Account" />
-				</Navigation.Bar>
-			</div>
-		</div>
-	</header>
+	<Navbar />
 
 	<!-- Hero -->
 	<section class="relative overflow-hidden bg-surface-50-950">
diff --git a/web/src/routes/admin/.gitkeep b/web/src/routes/admin/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/web/src/routes/auth/.gitkeep b/web/src/routes/auth/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/web/src/routes/orders/+page.svelte b/web/src/routes/orders/+page.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/web/src/routes/products/+page.svelte b/web/src/routes/products/+page.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/web/static/assets/logo-light.svg b/web/static/assets/logo-light.svg
new file mode 100644
index 0000000..c218929
--- /dev/null
+++ b/web/static/assets/logo-light.svg
@@ -0,0 +1,81 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   data-v-423bf9ae=""
+   viewBox="0 0 434 90"
+   class="iconLeft"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="logo-light.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview4"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="2.8018433"
+     inkscape:cx="217"
+     inkscape:cy="44.970395"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" />
+  <g
+     data-v-423bf9ae=""
+     id="7ccbf1f1-d01a-42aa-9755-e9ae79724b7b"
+     fill="#331B2B"
+     transform="matrix(5.7915059834320255,0,0,5.7915059834320255,152.75612078133662,14.999999523162842)"
+     style="fill:#ffffff;fill-opacity:1">
+    <path
+       d="M4.00 10.36C6.12 10.36 7.24 8.92 7.24 7.56C7.24 6.16 6.17 5.33 4.65 4.96L3.35 4.65C1.90 4.31 1.76 3.54 1.76 3.09C1.76 2.02 2.79 1.33 3.88 1.33C5.04 1.33 5.92 2.02 5.98 3.08L6.90 3.08C6.85 1.47 5.54 0.46 3.91 0.46C2.31 0.46 0.84 1.50 0.84 3.09C0.84 3.86 1.13 5.03 3.12 5.50L4.42 5.81C5.38 6.05 6.31 6.55 6.31 7.60C6.31 8.51 5.54 9.49 4.00 9.49C2.65 9.49 1.78 8.58 1.68 7.63L0.77 7.63C0.84 9.03 2.11 10.36 4.00 10.36ZM11.82 3.68L10.32 3.68L10.32 1.08L9.44 1.08L9.44 3.68L8.25 3.68L8.25 4.45L9.44 4.45L9.44 10.22L10.32 10.22L10.32 4.45L11.82 4.45ZM16.02 10.36C17.88 10.36 19.45 9.00 19.45 6.93C19.45 4.86 17.88 3.54 16.02 3.54C14.15 3.54 12.60 4.86 12.60 6.93C12.60 9.00 14.15 10.36 16.02 10.36ZM16.02 9.51C14.63 9.51 13.50 8.48 13.50 6.93C13.50 5.39 14.63 4.40 16.02 4.40C17.39 4.40 18.55 5.39 18.55 6.93C18.55 8.48 17.39 9.51 16.02 9.51ZM24.23 10.35C25.17 10.35 26.00 10.01 26.59 9.45L26.03 8.85C25.58 9.25 24.96 9.49 24.26 9.49C22.83 9.49 21.67 8.47 21.67 6.94C21.67 5.40 22.83 4.40 24.26 4.40C24.96 4.40 25.58 4.65 26.03 5.05L26.59 4.44C26.00 3.89 25.17 3.54 24.23 3.54C22.37 3.54 20.78 4.87 20.78 6.94C20.78 9.02 22.37 10.35 24.23 10.35ZM33.66 10.22L30.03 6.52L32.83 3.68L31.58 3.68L29.13 6.19L29.13 0L28.24 0L28.24 10.22L29.13 10.22L29.13 6.86L32.44 10.22ZM34.68 10.22L35.57 10.22L35.57 0L34.68 0ZM43.92 6.93C43.92 4.86 42.56 3.54 40.70 3.54C38.85 3.54 37.37 4.86 37.37 6.93C37.37 9.00 38.85 10.36 40.70 10.36C41.93 10.36 43.05 9.77 43.62 8.72L42.85 8.39C42.42 9.10 41.62 9.51 40.73 9.51C39.41 9.51 38.43 8.72 38.28 7.32L43.90 7.32C43.92 7.20 43.92 7.06 43.92 6.93ZM38.29 6.55C38.46 5.15 39.41 4.40 40.70 4.40C41.97 4.40 42.91 5.19 43.04 6.55ZM48.40 3.68L46.90 3.68L46.90 1.08L46.02 1.08L46.02 3.68L44.83 3.68L44.83 4.45L46.02 4.45L46.02 10.22L46.90 10.22L46.90 4.45L48.40 4.45Z"
+       id="path1"
+       style="fill:#ffffff;fill-opacity:1" />
+  </g>
+  <defs
+     data-v-423bf9ae=""
+     id="defs2">
+    <linearGradient
+       data-v-423bf9ae=""
+       gradientTransform="rotate(25)"
+       id="e8769ea9-6fdc-46c7-87bb-cf92f23a859c"
+       x1="0%"
+       y1="0%"
+       x2="100%"
+       y2="0%">
+      <stop
+         data-v-423bf9ae=""
+         offset="0%"
+         style="stop-color: rgb(140, 72, 210); stop-opacity: 1;"
+         id="stop1" />
+      <stop
+         data-v-423bf9ae=""
+         offset="100%"
+         style="stop-color: rgb(207, 112, 90); stop-opacity: 1;"
+         id="stop2" />
+    </linearGradient>
+  </defs>
+  <g
+     data-v-423bf9ae=""
+     id="7665600e-8875-4e76-bddc-4f57bcba1929"
+     transform="matrix(3.635041968759201,0,0,3.635041968759201,0.39221588485064274,-0.0000019073486328125)"
+     stroke="none"
+     fill="url(#e8769ea9-6fdc-46c7-87bb-cf92f23a859c)">
+    <path
+       d="M30.231 8.097h-5.692v7.71h5.692v-7.71zM37.748 8.097h-6.023v7.71h6.023v-7.71z"
+       id="path2" />
+    <path
+       d="M35.647 22.106c0 .249-.026.47-.055.663h2.155v-5.471H13.569a.75.75 0 01-.36-.084.651.651 0 01-.276-.275L3.207 0H0l12.768 22.77h2.266c-.028-.138-.028-.276-.028-.414 0-1.022.359-1.907 1.105-2.625.718-.719 1.575-1.078 2.598-1.078.995 0 1.852.359 2.57 1.078.746.718 1.105 1.603 1.105 2.625 0 .138 0 .276-.028.414h6.024a2.385 2.385 0 01-.083-.663c0-1.021.359-1.906 1.078-2.625.718-.718 1.574-1.078 2.569-1.078 1.023 0 1.907.36 2.626 1.078.719.718 1.077 1.603 1.077 2.624z"
+       id="path3" />
+    <path
+       d="M34.404 22.079a2.37 2.37 0 00-.719-1.74 2.373 2.373 0 00-1.741-.719c-.663 0-1.243.248-1.713.719a2.372 2.372 0 00-.719 1.74c0 .249.028.497.111.69.11.387.304.719.607 1.023.47.47 1.05.719 1.713.719.691 0 1.271-.249 1.741-.719.304-.305.498-.637.635-1.023.058-.193.085-.441.085-.69zM23.047 15.807v-7.71h-5.859v7.71h5.859zM15.696 8.097H9.589l4.422 7.71h1.685v-7.71zM16.221 22.328c0 .139.028.304.056.441.082.471.303.912.663 1.271.497.471 1.077.719 1.74.719.664 0 1.244-.248 1.742-.719.359-.359.58-.801.69-1.271.027-.138.027-.303.027-.441 0-.691-.248-1.271-.718-1.741-.498-.47-1.078-.719-1.742-.719-.663 0-1.243.249-1.74.719a2.384 2.384 0 00-.718 1.741z"
+       id="path4" />
+  </g>
+</svg>
diff --git a/web/static/assets/logo.svg b/web/static/assets/logo.svg
new file mode 100644
index 0000000..02d29dd
--- /dev/null
+++ b/web/static/assets/logo.svg
@@ -0,0 +1,81 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   data-v-423bf9ae=""
+   viewBox="0 0 434 90"
+   class="iconLeft"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="logo.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview4"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="4.0852535"
+     inkscape:cx="149.56232"
+     inkscape:cy="45.040045"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" />
+  <g
+     data-v-423bf9ae=""
+     id="7ccbf1f1-d01a-42aa-9755-e9ae79724b7b"
+     fill="#331B2B"
+     transform="matrix(5.7915059834320255,0,0,5.7915059834320255,152.75612078133662,14.999999523162842)"
+     style="fill:#000000;fill-opacity:1">
+    <path
+       d="M4.00 10.36C6.12 10.36 7.24 8.92 7.24 7.56C7.24 6.16 6.17 5.33 4.65 4.96L3.35 4.65C1.90 4.31 1.76 3.54 1.76 3.09C1.76 2.02 2.79 1.33 3.88 1.33C5.04 1.33 5.92 2.02 5.98 3.08L6.90 3.08C6.85 1.47 5.54 0.46 3.91 0.46C2.31 0.46 0.84 1.50 0.84 3.09C0.84 3.86 1.13 5.03 3.12 5.50L4.42 5.81C5.38 6.05 6.31 6.55 6.31 7.60C6.31 8.51 5.54 9.49 4.00 9.49C2.65 9.49 1.78 8.58 1.68 7.63L0.77 7.63C0.84 9.03 2.11 10.36 4.00 10.36ZM11.82 3.68L10.32 3.68L10.32 1.08L9.44 1.08L9.44 3.68L8.25 3.68L8.25 4.45L9.44 4.45L9.44 10.22L10.32 10.22L10.32 4.45L11.82 4.45ZM16.02 10.36C17.88 10.36 19.45 9.00 19.45 6.93C19.45 4.86 17.88 3.54 16.02 3.54C14.15 3.54 12.60 4.86 12.60 6.93C12.60 9.00 14.15 10.36 16.02 10.36ZM16.02 9.51C14.63 9.51 13.50 8.48 13.50 6.93C13.50 5.39 14.63 4.40 16.02 4.40C17.39 4.40 18.55 5.39 18.55 6.93C18.55 8.48 17.39 9.51 16.02 9.51ZM24.23 10.35C25.17 10.35 26.00 10.01 26.59 9.45L26.03 8.85C25.58 9.25 24.96 9.49 24.26 9.49C22.83 9.49 21.67 8.47 21.67 6.94C21.67 5.40 22.83 4.40 24.26 4.40C24.96 4.40 25.58 4.65 26.03 5.05L26.59 4.44C26.00 3.89 25.17 3.54 24.23 3.54C22.37 3.54 20.78 4.87 20.78 6.94C20.78 9.02 22.37 10.35 24.23 10.35ZM33.66 10.22L30.03 6.52L32.83 3.68L31.58 3.68L29.13 6.19L29.13 0L28.24 0L28.24 10.22L29.13 10.22L29.13 6.86L32.44 10.22ZM34.68 10.22L35.57 10.22L35.57 0L34.68 0ZM43.92 6.93C43.92 4.86 42.56 3.54 40.70 3.54C38.85 3.54 37.37 4.86 37.37 6.93C37.37 9.00 38.85 10.36 40.70 10.36C41.93 10.36 43.05 9.77 43.62 8.72L42.85 8.39C42.42 9.10 41.62 9.51 40.73 9.51C39.41 9.51 38.43 8.72 38.28 7.32L43.90 7.32C43.92 7.20 43.92 7.06 43.92 6.93ZM38.29 6.55C38.46 5.15 39.41 4.40 40.70 4.40C41.97 4.40 42.91 5.19 43.04 6.55ZM48.40 3.68L46.90 3.68L46.90 1.08L46.02 1.08L46.02 3.68L44.83 3.68L44.83 4.45L46.02 4.45L46.02 10.22L46.90 10.22L46.90 4.45L48.40 4.45Z"
+       id="path1"
+       style="fill:#000000;fill-opacity:1" />
+  </g>
+  <defs
+     data-v-423bf9ae=""
+     id="defs2">
+    <linearGradient
+       data-v-423bf9ae=""
+       gradientTransform="rotate(25)"
+       id="e8769ea9-6fdc-46c7-87bb-cf92f23a859c"
+       x1="0%"
+       y1="0%"
+       x2="100%"
+       y2="0%">
+      <stop
+         data-v-423bf9ae=""
+         offset="0%"
+         style="stop-color: rgb(140, 72, 210); stop-opacity: 1;"
+         id="stop1" />
+      <stop
+         data-v-423bf9ae=""
+         offset="100%"
+         style="stop-color: rgb(207, 112, 90); stop-opacity: 1;"
+         id="stop2" />
+    </linearGradient>
+  </defs>
+  <g
+     data-v-423bf9ae=""
+     id="7665600e-8875-4e76-bddc-4f57bcba1929"
+     transform="matrix(3.635041968759201,0,0,3.635041968759201,0.39221588485064274,-0.0000019073486328125)"
+     stroke="none"
+     fill="url(#e8769ea9-6fdc-46c7-87bb-cf92f23a859c)">
+    <path
+       d="M30.231 8.097h-5.692v7.71h5.692v-7.71zM37.748 8.097h-6.023v7.71h6.023v-7.71z"
+       id="path2" />
+    <path
+       d="M35.647 22.106c0 .249-.026.47-.055.663h2.155v-5.471H13.569a.75.75 0 01-.36-.084.651.651 0 01-.276-.275L3.207 0H0l12.768 22.77h2.266c-.028-.138-.028-.276-.028-.414 0-1.022.359-1.907 1.105-2.625.718-.719 1.575-1.078 2.598-1.078.995 0 1.852.359 2.57 1.078.746.718 1.105 1.603 1.105 2.625 0 .138 0 .276-.028.414h6.024a2.385 2.385 0 01-.083-.663c0-1.021.359-1.906 1.078-2.625.718-.718 1.574-1.078 2.569-1.078 1.023 0 1.907.36 2.626 1.078.719.718 1.077 1.603 1.077 2.624z"
+       id="path3" />
+    <path
+       d="M34.404 22.079a2.37 2.37 0 00-.719-1.74 2.373 2.373 0 00-1.741-.719c-.663 0-1.243.248-1.713.719a2.372 2.372 0 00-.719 1.74c0 .249.028.497.111.69.11.387.304.719.607 1.023.47.47 1.05.719 1.713.719.691 0 1.271-.249 1.741-.719.304-.305.498-.637.635-1.023.058-.193.085-.441.085-.69zM23.047 15.807v-7.71h-5.859v7.71h5.859zM15.696 8.097H9.589l4.422 7.71h1.685v-7.71zM16.221 22.328c0 .139.028.304.056.441.082.471.303.912.663 1.271.497.471 1.077.719 1.74.719.664 0 1.244-.248 1.742-.719.359-.359.58-.801.69-1.271.027-.138.027-.303.027-.441 0-.691-.248-1.271-.718-1.741-.498-.47-1.078-.719-1.742-.719-.663 0-1.243.249-1.74.719a2.384 2.384 0 00-.718 1.741z"
+       id="path4" />
+  </g>
+</svg>