Merge pull request #32 from jimeh/feat/theme-toggle-sun-moon-icon

feat: replace theme toggle system icon with custom sun-moon SVG

CLAUDE.md

@@ -47,7 +47,7 @@ The site is built to `dist/` and deployed to Cloudflare Workers.
 
 - **Astro 5.x** static site generator
 - **Tailwind CSS 4.x** for styling with dark mode support
-- **astro-icon** with Heroicons and Simple Icons for icons
+- **astro-icon** with Heroicons, Simple Icons, and custom local SVGs (`src/icons/`)
 - **Content Collections** for spec markdown files
 - **TypeScript** throughout
 - **Node.js** as JavaScript runtime (managed via mise)

src/components/ThemeToggle.astro

@@ -14,11 +14,7 @@ import { Icon } from "astro-icon/components";
   >
     <Icon name="heroicons:sun" data-theme-icon="light" class="hidden w-5 h-5" />
     <Icon name="heroicons:moon" data-theme-icon="dark" class="hidden w-5 h-5" />
-    <Icon
-      name="heroicons:computer-desktop"
-      data-theme-icon="auto"
-      class="hidden w-5 h-5"
-    />
+    <Icon name="sun-moon" data-theme-icon="auto" class="hidden w-5 h-5" />
   </button>
   <!-- Tooltip -->
   <div

src/icons/sun-moon.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+  <!-- Circle outline -->
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z"/>
+  <!-- Right half filled (dark/moon side) -->
+  <path fill="currentColor" d="M12 8.25a3.75 3.75 0 0 1 0 7.5z"/>
+  <!-- Left-side sun rays (top, top-left, left, bottom-left, bottom) -->
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 3v2.25M7.227 7.227 5.636 5.636M5.25 12H3M7.227 16.773l-1.591 1.591M12 18.75V21"/>
+</svg>